<!DOCTYPE html><html><head>
      <title>README</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="file:///c:\Users\Administrator\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.6.2\node_modules\@shd101wyy\mume\dependencies\katex\katex.min.css">
      
      
      
      
      
      
      
      
      
      <style>
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}
pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before, 
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: hsla(24, 20%, 50%,.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

      </style>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview  ">
      <h1 class="mume-header" id="%E7%AC%AC7%E7%AB%A0-dom%E4%B8%8B">&#x7B2C;7&#x7AE0; DOM&#xFF08;&#x4E0B;&#xFF09;</h1>

<h2 class="mume-header" id="%E4%B8%80-%E6%8E%92%E4%BB%96%E6%93%8D%E4%BD%9C">&#x4E00;&#x3001;&#x6392;&#x4ED6;&#x64CD;&#x4F5C;</h2>

<h3 class="mume-header" id="1-%E6%8E%92%E4%BB%96%E6%80%9D%E6%83%B3%E7%AE%80%E4%BB%8B">1&#x3001;&#x6392;&#x4ED6;&#x601D;&#x60F3;&#x7B80;&#x4ECB;</h3>

<p><strong>&#x6392;&#x4ED6;&#x601D;&#x60F3;</strong>&#xFF0C;&#x7B80;&#x5355;&#x7406;&#x89E3;&#x5C31;&#x662F;&#x6392;&#x9664;&#x6389;&#x5176;&#x4ED6;&#x7684;&#xFF08;&#x5305;&#x62EC;&#x81EA;&#x5DF1;&#xFF09;&#xFF0C;&#x7136;&#x540E;&#x518D;&#x7ED9;&#x81EA;&#x5DF1;&#x8BBE;&#x7F6E;&#x60F3;&#x8981;&#x5B9E;&#x73B0;&#x7684;&#x6548;&#x679C;&#x3002;&#x603B;&#x800C;&#x8A00;&#x4E4B;&#xFF0C;&#x6392;&#x4ED6;&#x601D;&#x60F3;&#x7684;&#x5B9E;&#x73B0;&#x6B65;&#x9AA4;&#x5C31;&#x662F;&#x6240;&#x6709;&#x5143;&#x7D20;&#x5168;&#x90E8;&#x6E05;&#x9664;&#x4E0E;&#x8BBE;&#x7F6E;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x3002;<br>
<strong>&#x6848;&#x4F8B;&#x6F14;&#x793A;&#xFF1A;</strong> &#x5728;&#x540C;&#x4E00;&#x7EC4;&#x5143;&#x7D20;&#x4E2D;&#xFF0C;&#x60F3;&#x8981;&#x67D0;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x5B9E;&#x73B0;&#x67D0;&#x79CD;&#x6837;&#x5F0F;&#xFF0C;&#x4F7F;&#x7528;&#x5FAA;&#x73AF;&#x7684;&#x6392;&#x4ED6;&#x601D;&#x60F3;&#x7B97;&#x6CD5;&#x6765;&#x5B9E;&#x73B0;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- &#x7F16;&#x5199;HTML&#x7ED3;&#x6784;&#x4EE3;&#x7801; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>&#x6309;&#x94AE;1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>&#x6309;&#x94AE;2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>&#x6309;&#x94AE;3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>&#x6309;&#x94AE;4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>&#x6309;&#x94AE;5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &#x7F16;&#x5199;JS&#x4EE3;&#x7801;&#xFF0C;&#x5355;&#x51FB;&#x6309;&#x94AE;&#xFF0C;&#x6539;&#x53D8;&#x5F53;&#x524D;&#x6309;&#x94AE;&#x80CC;&#x666F;&#x8272; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token comment">// 1. &#x83B7;&#x53D6;&#x6240;&#x6709;&#x6309;&#x94AE;&#x5143;&#x7D20;&#xFF0C; btns&#x5F97;&#x5230;&#x7684;&#x662F;&#x7C7B;&#x6570;&#x7EC4;&#x5BF9;&#x8C61;</span>
  <span class="token keyword keyword-var">var</span> btns <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">&apos;button&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword control-flow keyword-for">for</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword keyword-var">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> btns<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> i<span class="token operator">++</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// &#x91CC;&#x9762;&#x7684;&#x6BCF;&#x4E00;&#x4E2A;&#x5143;&#x7D20;btns[i]</span>
    btns<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onclick</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword control-flow keyword-for">for</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword keyword-var">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> btns<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> i<span class="token operator">++</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// (1) &#x5148;&#x628A;&#x6240;&#x6709;&#x7684;&#x6309;&#x94AE;&#x80CC;&#x666F;&#x989C;&#x8272;&#x53BB;&#x6389;</span>
        btns<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">backgroundColor</span> <span class="token operator">=</span> <span class="token string">&apos;&apos;</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">backgroundColor</span> <span class="token operator">=</span> <span class="token string">&apos;pink&apos;</span><span class="token punctuation">;</span> <span class="token comment">// (2) &#x7136;&#x540E;&#x8BBE;&#x7F6E;&#x5F53;&#x524D;&#x7684;&#x5143;&#x7D20;&#x80CC;&#x666F;&#x989C;&#x8272;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre><h3 class="mume-header" id="2-%E6%A1%88%E4%BE%8B%E9%BC%A0%E6%A0%87%E7%BB%8F%E8%BF%87%E6%97%B6%E8%83%8C%E6%99%AF%E5%8F%98%E8%89%B2">2&#x3001;&#x3010;&#x6848;&#x4F8B;&#x3011;&#x9F20;&#x6807;&#x7ECF;&#x8FC7;&#x65F6;&#x80CC;&#x666F;&#x53D8;&#x8272;</h3>

<p><strong>&#x6848;&#x4F8B;&#x5206;&#x6790;&#xFF1A;</strong> &#x5F53;&#x8868;&#x683C;&#x4E2D;&#x7684;&#x5355;&#x5143;&#x683C;&#x6BD4;&#x8F83;&#x591A;&#x65F6;&#xFF0C;&#x53EF;&#x4EE5;&#x5728;&#x7528;&#x6237;&#x9F20;&#x6807;&#x6307;&#x9488;&#x7ECF;&#x8FC7;&#x65F6;&#x628A;&#x5F53;&#x524D;&#x884C;&#x6DFB;&#x52A0;&#x80CC;&#x666F;&#x8272;&#xFF0C;&#x4F7F;&#x8868;&#x683C;&#x5185;&#x5BB9;&#x663E;&#x5F97;&#x6E05;&#x6670;&#x548C;&#x4E00;&#x76EE;&#x4E86;&#x7136;&#xFF0C;&#x5BB9;&#x6613;&#x9605;&#x8BFB;&#x3002;<br>
<strong>&#x6848;&#x4F8B;&#x6F14;&#x793A;&#xFF1A;</strong> &#x63A5;&#x4E0B;&#x6765;&#xFF0C;&#x4F7F;&#x7528;&#x9F20;&#x6807;&#x6307;&#x9488;&#x7ECF;&#x8FC7;&#x4E8B;&#x4EF6;onmouseover&#x548C;&#x9F20;&#x6807;&#x6307;&#x9488;&#x79BB;&#x5F00;&#x4E8B;&#x4EF6;onmouseout&#x5B9E;&#x73B0;&#x6848;&#x4F8B;&#x6548;&#x679C;&#x3002;CSS&#x6837;&#x5F0F;&#x4EE3;&#x7801;&#x8BF7;&#x53C2;&#x8003;&#x672C;&#x4E66;&#x6E90;&#x4EE3;&#x7801;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- &#x7F16;&#x5199;HTML&#x7ED3;&#x6784;&#x4EE3;&#x7801; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>&#x4EE3;&#x7801;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>&#x540D;&#x79F0;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>&#x6700;&#x65B0;&#x516C;&#x5E03;&#x51C0;&#x503C;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>&#x7D2F;&#x8BA1;&#x51C0;&#x503C;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>&#x524D;&#x5355;&#x4F4D;&#x51C0;&#x503C;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>&#x51C0;&#x503C;&#x589E;&#x957F;&#x7387;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>0035**<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>3&#x4E2A;&#x6708;&#x5B9A;&#x671F;&#x5F00;&#x653E;&#x503A;&#x5238;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>1.075<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>1.079<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>1.074<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>+0.047%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
     ... &#xFF08;&#x6B64;&#x5904;&#x7701;&#x7565;&#x591A;&#x4E2A;tr&#xFF09;
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &#x7F16;&#x5199;JS&#x4EE3;&#x7801;&#xFF0C;&#x9F20;&#x6807;&#x6307;&#x9488;&#x7ECF;&#x8FC7;&#x65F6;&#x80CC;&#x666F;&#x53D8;&#x8272; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword keyword-var">var</span> trs <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;tbody&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&apos;tr&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1. &#x83B7;&#x53D6;&#x5143;&#x7D20;</span>
   <span class="token keyword control-flow keyword-for">for</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword keyword-var">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> trs<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> i<span class="token operator">++</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token comment">// 2. &#x5229;&#x7528;&#x5FAA;&#x73AF;&#x7ED1;&#x5B9A;&#x6CE8;&#x518C;&#x4E8B;&#x4EF6;</span>
    trs<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onmouseover</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 3. &#x9F20;&#x6807;&#x7ECF;&#x8FC7;&#x4E8B;&#x4EF6; onmouseover</span>
      <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">className</span> <span class="token operator">=</span> <span class="token string">&apos;bg&apos;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    trs<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onmouseout</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 4. &#x9F20;&#x6807;&#x79BB;&#x5F00;&#x4E8B;&#x4EF6; onmouseout</span>
      <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">className</span> <span class="token operator">=</span> <span class="token string">&apos;&apos;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

</pre><h2 class="mume-header" id="%E4%BA%8C-%E5%B1%9E%E6%80%A7%E6%93%8D%E4%BD%9C">&#x4E8C;&#x3001;&#x5C5E;&#x6027;&#x64CD;&#x4F5C;</h2>

<h3 class="mume-header" id="1-%E8%8E%B7%E5%8F%96%E5%B1%9E%E6%80%A7%E5%80%BC">1&#x3001;&#x83B7;&#x53D6;&#x5C5E;&#x6027;&#x503C;</h3>

<p>&#x5728;DOM&#x5BF9;&#x8C61;&#x4E2D;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x201C;element.&#x5C5E;&#x6027;&#x201D;&#x7684;&#x65B9;&#x5F0F;&#x6765;&#x83B7;&#x53D6;&#x5185;&#x7F6E;&#x7684;&#x5C5E;&#x6027;&#x503C;&#xFF0C;&#x4F46;&#x662F;DOM&#x5BF9;&#x8C61;&#x5E76;&#x4E0D;&#x80FD;&#x76F4;&#x63A5;&#x4F7F;&#x7528;&#x70B9;&#x8BED;&#x6CD5;&#x83B7;&#x53D6;&#x5230;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x7684;&#x503C;&#xFF0C;&#x90A3;&#x4E48;&#x5982;&#x4F55;&#x83B7;&#x53D6;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x503C;&#x5462;&#xFF1F;<br>
&#x5728;DOM&#x4E2D;&#xFF0C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528; <strong>getAttribute(&apos;&#x5C5E;&#x6027;&apos;)</strong> &#x65B9;&#x6CD5;&#x6765;&#x8FD4;&#x56DE;&#x6307;&#x5B9A;&#x5143;&#x7D20;&#x7684;&#x5C5E;&#x6027;&#x503C;&#x3002;&#x63A5;&#x4E0B;&#x6765;&#x901A;&#x8FC7;&#x6848;&#x4F8B;&#x6765;&#x6F14;&#x793A;&#x5982;&#x4F55;&#x83B7;&#x53D6;&#x5C5E;&#x6027;&#x503C;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demo<span class="token punctuation">&quot;</span></span> <span class="token attr-name">index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword keyword-var">var</span> div <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;div&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                               <span class="token comment">// &#x7ED3;&#x679C;&#x4E3A;&#xFF1A;demo</span>
     <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token method function property-access">getAttribute</span><span class="token punctuation">(</span><span class="token string">&apos;id&apos;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// &#x7ED3;&#x679C;&#x4E3A;&#xFF1A;demo</span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token method function property-access">getAttribute</span><span class="token punctuation">(</span><span class="token string">&apos;index&apos;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &#x7ED3;&#x679C;&#x4E3A;&#xFF1A;1</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

</pre><h3 class="mume-header" id="2-%E8%AE%BE%E7%BD%AE%E5%B1%9E%E6%80%A7%E5%80%BC">2&#x3001;&#x8BBE;&#x7F6E;&#x5C5E;&#x6027;&#x503C;</h3>

<p>&#x5728;DOM&#x5BF9;&#x8C61;&#x4E2D;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x201C;element.&#x5C5E;&#x6027;= &apos;&#x503C;&apos;&#x201D;&#x7684;&#x65B9;&#x5F0F;&#x6765;&#x8BBE;&#x7F6E;&#x5185;&#x7F6E;&#x7684;&#x5C5E;&#x6027;&#x503C;&#xFF0C;&#x5E76;&#x4E14;&#x9488;&#x5BF9;&#x4E8E;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#xFF0C;&#x63D0;&#x4F9B;&#x4E86; <strong>&#x201C;element.setAttribute(&apos;&#x5C5E;&#x6027;&apos;,&#xA0;&apos;&#x503C;&apos;)&#x201D;</strong> &#x7684;&#x65B9;&#x5F0F;&#x8FDB;&#x884C;&#x83B7;&#x53D6;&#x3002;<br>
&#x503C;&#x5F97;&#x4E00;&#x63D0;&#x7684;&#x662F;&#xFF0C;&#x8BBE;&#x7F6E;&#x4E86;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x7684;&#x6807;&#x7B7E;&#xFF0C;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x7684;HTML&#x7ED3;&#x6784;&#x4E2D;&#x53EF;&#x4EE5;&#x770B;&#x5230;&#x8BE5;&#x5C5E;&#x6027;&#x3002;&#x63A5;&#x4E0B;&#x6765;&#x901A;&#x8FC7;&#x6848;&#x4F8B;&#x6765;&#x6F14;&#x793A;&#x5982;&#x4F55;&#x8BBE;&#x7F6E;&#x5C5E;&#x6027;&#x503C;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword keyword-var">var</span> div <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;div&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    div<span class="token punctuation">.</span><span class="token property-access">id</span> <span class="token operator">=</span> <span class="token string">&apos;test&apos;</span><span class="token punctuation">;</span>                        <span class="token comment">// &#x8BBE;&#x7F6E;id&#x503C;&#x4E3A;test</span>
    div<span class="token punctuation">.</span><span class="token property-access">className</span> <span class="token operator">=</span> <span class="token string">&apos;navs&apos;</span><span class="token punctuation">;</span>        <span class="token comment">// &#x8BBE;&#x7F6E;class&#x7C7B;&#x540D;&#x4E3A;navs</span>
    div<span class="token punctuation">.</span><span class="token method function property-access">setAttribute</span><span class="token punctuation">(</span><span class="token string">&apos;index&apos;</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// &#x8BBE;&#x7F6E;&#x5C5E;&#x6027;&#x540D;&#x4E3A;index&#xFF0C;&#x503C;&#x4E3A;2</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

</pre><p>&#x53E6;&#x5916;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;setAttribute()&#x65B9;&#x5F0F;&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x7C7B;&#x540D;&#x3002;</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript">div<span class="token punctuation">.</span><span class="token method function property-access">setAttribute</span><span class="token punctuation">(</span><span class="token string">&apos;class&apos;</span><span class="token punctuation">,</span> <span class="token string">&apos;footer&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><h3 class="mume-header" id="3-%E7%A7%BB%E9%99%A4%E5%B1%9E%E6%80%A7">3&#x3001;&#x79FB;&#x9664;&#x5C5E;&#x6027;</h3>

<p>&#x5728;DOM&#x4E2D;&#x4F7F;&#x7528; <strong>&#x201C;element.removeAttribute(&apos;&#x5C5E;&#x6027;&apos;)&#x201D;</strong> &#x7684;&#x65B9;&#x5F0F;&#x6765;&#x79FB;&#x9664;&#x5143;&#x7D20;&#x5C5E;&#x6027;&#x3002;&#x63A5;&#x4E0B;&#x6765;&#xFF0C;&#x901A;&#x8FC7;&#x6848;&#x4F8B;&#x6F14;&#x793A;&#x5982;&#x4F55;&#x79FB;&#x9664;&#x5C5E;&#x6027;&#x503C;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword keyword-var">var</span> div <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;div&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   
    div<span class="token punctuation">.</span><span class="token method function property-access">removeAttribute</span><span class="token punctuation">(</span><span class="token string">&apos;id&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// &#x79FB;&#x9664;div&#x5143;&#x7D20;&#x7684;id&#x5C5E;&#x6027;</span>
    div<span class="token punctuation">.</span><span class="token method function property-access">removeAttribute</span><span class="token punctuation">(</span><span class="token string">&apos;class&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// &#x79FB;&#x9664;div&#x5143;&#x7D20;&#x7684;class&#x5C5E;&#x6027;                        </span>
    div<span class="token punctuation">.</span><span class="token method function property-access">removeAttribute</span><span class="token punctuation">(</span><span class="token string">&apos;index&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &#x79FB;&#x9664;div&#x5143;&#x7D20;&#x7684;index&#x5C5E;&#x6027;</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</pre><h3 class="mume-header" id="4-%E6%A1%88%E4%BE%8Btab%E6%A0%8F%E5%88%87%E6%8D%A2">4&#x3001;&#x3010;&#x6848;&#x4F8B;&#x3011;Tab&#x680F;&#x5207;&#x6362;</h3>

<p><strong>&#x6848;&#x4F8B;&#x8981;&#x6C42;&#xFF1A;</strong> &#x6807;&#x7B7E;&#x680F;&#x5728;&#x7F51;&#x7AD9;&#x4E2D;&#x7684;&#x4F7F;&#x7528;&#x975E;&#x5E38;&#x666E;&#x904D;&#xFF0C;&#x5B83;&#x7684;&#x4F18;&#x52BF;&#x5728;&#x4E8E;&#x53EF;&#x4EE5;&#x5728;&#x6709;&#x9650;&#x7684;&#x7A7A;&#x95F4;&#x5185;&#x5C55;&#x793A;&#x591A;&#x5757;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x7528;&#x6237;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x6807;&#x7B7E;&#x5728;&#x591A;&#x4E2A;&#x5185;&#x5BB9;&#x5757;&#x4E4B;&#x95F4;&#x8FDB;&#x884C;&#x5207;&#x6362;&#x3002;<br>
&#x5728;&#x672C;&#x6848;&#x4F8B;&#x4E2D;&#x8981;&#x6C42;&#x4F7F;&#x7528;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x76F8;&#x5173;&#x77E5;&#x8BC6;&#x5B9E;&#x73B0;Tab&#x680F;&#x5207;&#x6362;&#x6548;&#x679C;&#xFF0C;&#x5177;&#x4F53;&#x7684;CSS&#x6837;&#x5F0F;&#x8BF7;&#x53C2;&#x8003;&#x672C;&#x4E66;&#x6E90;&#x7801;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- &#x7F16;&#x5199;HTML&#x7ED3;&#x6784;&#x4EE3;&#x7801; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tab<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tab_list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span> // &#x6807;&#x7B7E;&#x90E8;&#x5206;
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tab_con<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>            // &#x6807;&#x7B7E;&#x5185;&#x5BB9;&#x90E8;&#x5206;
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>&#x5546;&#x54C1;&#x4ECB;&#x7ECD;&#x6A21;&#x5757;&#x5185;&#x5BB9;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x89C4;&#x683C;&#x4E0E;&#x5305;&#x88C5;&#x6A21;&#x5757;&#x5185;&#x5BB9;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x552E;&#x540E;&#x4FDD;&#x969C;&#x6A21;&#x5757;&#x5185;&#x5BB9;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x5546;&#x54C1;&#x8BC4;&#x4EF7;&#xFF08;50000&#xFF09;&#x6A21;&#x5757;&#x5185;&#x5BB9;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x624B;&#x673A;&#x793E;&#x533A;&#x6A21;&#x5757;&#x5185;&#x5BB9;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &#x7F16;&#x5199;JS&#x4EE3;&#x7801;&#xFF0C;&#x83B7;&#x53D6;&#x6807;&#x7B7E;&#x90E8;&#x5206;&#x548C;&#x5185;&#x5BB9;&#x90E8;&#x5206;&#x7684;&#x5BF9;&#x8C61;&#x5143;&#x7D20; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
     <span class="token comment">// &#x83B7;&#x53D6;&#x6807;&#x7B7E;&#x90E8;&#x5206;&#x7684;&#x6240;&#x6709;&#x5143;&#x7D20;&#x5BF9;&#x8C61;</span>
     <span class="token keyword keyword-var">var</span> tab_list <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;.tab_list&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token keyword keyword-var">var</span> lis <span class="token operator">=</span> tab_list<span class="token punctuation">.</span><span class="token method function property-access">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&apos;li&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token comment">// &#x83B7;&#x53D6;&#x5185;&#x5BB9;&#x90E8;&#x5206;&#x7684;&#x6240;&#x6709;&#x5185;&#x5BB9;&#x5BF9;&#x8C61;</span>
     <span class="token keyword keyword-var">var</span> items <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&apos;.item&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token keyword control-flow keyword-for">for</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword keyword-var">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> lis<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> i<span class="token operator">++</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token comment">// for&#x5FAA;&#x73AF;&#x7ED1;&#x5B9A;&#x70B9;&#x51FB;&#x4E8B;&#x4EF6;</span>
         lis<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method function property-access">setAttribute</span><span class="token punctuation">(</span><span class="token string">&apos;index&apos;</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span>	   <span class="token comment">// &#x5F00;&#x59CB;&#x7ED9;5&#x4E2A;&#x5C0F;li&#x8BBE;&#x7F6E;&#x7D22;&#x5F15;&#x53F7;</span>
         lis<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onclick</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token comment">// &#x6E05;&#x9664;&#x6240;&#x6709;li&#x7684;class&#x7C7B;&#xFF0C;&#x7ED9;&#x81EA;&#x5DF1;&#x8BBE;&#x7F6E;current&#x7C7B;</span>
           <span class="token keyword control-flow keyword-for">for</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword keyword-var">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> lis<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> i<span class="token operator">++</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  lis<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">className</span> <span class="token operator">=</span> <span class="token string">&apos;&apos;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
           <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">className</span> <span class="token operator">=</span> <span class="token string">&apos;current&apos;</span><span class="token punctuation">;</span>
           <span class="token comment">// 2. &#x4E0B;&#x9762;&#x7684;&#x663E;&#x793A;&#x5185;&#x5BB9;&#x6A21;&#x5757;</span>
           <span class="token keyword keyword-var">var</span> index <span class="token operator">=</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token method function property-access">getAttribute</span><span class="token punctuation">(</span><span class="token string">&apos;index&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
           <span class="token keyword control-flow keyword-for">for</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword keyword-var">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> items<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> i<span class="token operator">++</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> items<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">display</span> <span class="token operator">=</span> <span class="token string">&apos;none&apos;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
          items<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">display</span> <span class="token operator">=</span> <span class="token string">&apos;block&apos;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 <span class="token punctuation">}</span><span class="token punctuation">;</span>

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

</pre><h2 class="mume-header" id="%E4%B8%89-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7">&#x4E09;&#x3001;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;</h2>

<h3 class="mume-header" id="1-%E8%AE%BE%E7%BD%AE%E5%B1%9E%E6%80%A7%E5%80%BC">1&#x3001;&#x8BBE;&#x7F6E;&#x5C5E;&#x6027;&#x503C;</h3>

<p>&#x4E00;&#x822C;&#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;getAttribute(&apos;&#x5C5E;&#x6027;&apos;)&#x65B9;&#x6CD5;&#x6765;&#x83B7;&#x53D6;&#xFF0C;&#x4F46;&#x662F;&#x6709;&#x4E9B;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x5F88;&#x5BB9;&#x6613;&#x5F15;&#x8D77;&#x6B67;&#x4E49;&#xFF0C;&#x4E0D;&#x5BB9;&#x6613;&#x5224;&#x65AD;&#x662F;&#x5143;&#x7D20;&#x7684;&#x81EA;&#x5E26;&#x5C5E;&#x6027;&#x8FD8;&#x662F;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x3002;&#x56E0;&#x6B64;&#xFF0C;HTML5&#x65B0;&#x589E;&#x4E86;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x7684;&#x89C4;&#x8303;&#xFF0C;&#x5728;HTML5&#x4E2D;&#x89C4;&#x5B9A;&#x901A;&#x8FC7; <strong>&#x201C;data-&#x5C5E;&#x6027;&#x540D;&#x201D;</strong> &#x7684;&#x65B9;&#x5F0F;&#x8BBE;&#x7F6E;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x3002;</p>
<p>&#x5143;&#x7D20;&#x7684;&#x201C;data-*&#x201D;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x6709;&#x4E24;&#x79CD;&#x8BBE;&#x7F6E;&#x65B9;&#x5F0F;&#xFF0C;&#x5206;&#x522B;&#x5982;&#x4E0B;&#xFF1A;</p>
<ol>
<li>&#x5728;HTML&#x4E2D;&#x8BBE;&#x7F6E;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- // &#x5728;div&#x5143;&#x7D20;&#x4E0A;&#x8BBE;&#x7F6E;data-index&#x5C5E;&#x6027; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">data-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

</pre></li>
<li>&#x5728;JavaScript&#x4E2D;&#x8BBE;&#x7F6E;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;<br>
&#x5728;JavaScript&#x4EE3;&#x7801;&#x4E2D;&#xFF0C;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;setAttribute(&apos;&#x5C5E;&#x6027;&apos;, &#x503C;)&#x6216;&#x8005;&#x201C;&#x5143;&#x7D20;&#x5BF9;&#x8C61;.dataset.&#x5C5E;&#x6027;&#x540D;=&apos;&#x503C;&apos;&#x201D;&#x4E24;&#x79CD;&#x65B9;&#x5F0F;&#x8BBE;&#x7F6E;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x3002;&#x9700;&#x8981;&#x6CE8;&#x610F;&#x7684;&#x662F;&#xFF0C;&#x901A;&#x8FC7;&#x540E;&#x8005;&#x7684;&#x65B9;&#x5F0F;&#x53EA;&#x80FD;&#x8BBE;&#x7F6E;&#x4EE5;&#x201C;data-&#x201D;&#x5F00;&#x5934;&#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x3002;<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword keyword-var">var</span> div <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;div&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    div<span class="token punctuation">.</span><span class="token property-access">dataset</span><span class="token punctuation">.</span><span class="token property-access">index</span> <span class="token operator">=</span> <span class="token string">&apos;2&apos;</span><span class="token punctuation">;</span>
     div<span class="token punctuation">.</span><span class="token method function property-access">setAttribute</span><span class="token punctuation">(</span><span class="token string">&apos;data-name&apos;</span><span class="token punctuation">,</span> <span class="token string">&apos;andy&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</pre></li>
</ol>
<h3 class="mume-header" id="2-%E8%8E%B7%E5%8F%96%E5%B1%9E%E6%80%A7%E5%80%BC">2&#x3001;&#x83B7;&#x53D6;&#x5C5E;&#x6027;&#x503C;</h3>

<p>&#x5728;DOM&#x64CD;&#x4F5C;&#x4E2D;&#xFF0C;&#x63D0;&#x4F9B;&#x4E86;&#x4E24;&#x79CD;&#x83B7;&#x53D6;&#x5C5E;&#x6027;&#x503C;&#x7684;&#x65B9;&#x5F0F;&#xFF0C;&#x7B2C;1&#x79CD;&#x662F;&#x901A;&#x8FC7; <strong>getAttribute()&#x65B9;&#x5F0F;</strong> &#xFF0C;&#x8BE5;&#x65B9;&#x5F0F;&#x53EF;&#x4EE5;&#x83B7;&#x53D6;&#x5185;&#x7F6E;&#x5C5E;&#x6027;&#x6216;&#x8005;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#xFF1B;&#x7B2C;2&#x79CD;&#x662F;&#x4F7F;&#x7528;HTML5&#x65B0;&#x589E;&#x7684; <strong>&#x201C;element.dataset.&#x5C5E;&#x6027;&#x201D;</strong> &#x6216;&#x8005; <strong>&#x201C;element.dataset[&apos;&#x5C5E;&#x6027;&apos;] &#x201D;</strong> &#x65B9;&#x5F0F;&#xFF08;&#x6709;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF09;&#x3002;&#x63A5;&#x4E0B;&#x6765;&#xFF0C;&#x901A;&#x8FC7;&#x6848;&#x4F8B;&#x5F62;&#x5F0F;&#x6F14;&#x793A;&#x5982;&#x4F55;&#x83B7;&#x53D6;&#x5C5E;&#x6027;&#x503C;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">getTime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-list-name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>andy<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword keyword-var">var</span> div <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;div&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token method function property-access">getAttribute</span><span class="token punctuation">(</span><span class="token string">&apos;data-index&apos;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">// &#x7ED3;&#x679C;&#x4E3A;&#xFF1A;2</span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token method function property-access">getAttribute</span><span class="token punctuation">(</span><span class="token string">&apos;data-list-name&apos;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &#x7ED3;&#x679C;&#x4E3A;&#xFF1A;andy</span>
  <span class="token comment">// HTML5&#x65B0;&#x589E;&#x7684;&#x83B7;&#x53D6;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x7684;&#x65B9;&#x6CD5;&#xFF0C;&#x53EA;&#x80FD;&#x83B7;&#x53D6;&#x201C;data-&#x201D;&#x5F00;&#x5934;&#x7684;&#x5C5E;&#x6027;</span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token property-access">dataset</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// DOMStringMap {index:&quot;2&quot;,listName:&quot;andy&quot;}</span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token property-access">dataset</span><span class="token punctuation">.</span><span class="token property-access">index</span><span class="token punctuation">)</span><span class="token punctuation">;</span>           <span class="token comment">// &#x7ED3;&#x679C;&#x4E3A;&#xFF1A;2</span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token property-access">dataset</span><span class="token punctuation">[</span><span class="token string">&apos;index&apos;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// &#x7ED3;&#x679C;&#x4E3A;&#xFF1A;2</span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token property-access">dataset</span><span class="token punctuation">.</span><span class="token property-access">listName</span><span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token comment">// &#x7ED3;&#x679C;&#x4E3A;&#xFF1A;andy</span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token property-access">dataset</span><span class="token punctuation">[</span><span class="token string">&apos;listName&apos;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// &#x7ED3;&#x679C;&#x4E3A;&#xFF1A;andy</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre><p><strong>&#x6CE8;&#x610F;</strong> dataset&#x662F;&#x4E00;&#x4E2A;&#x96C6;&#x5408;&#xFF0C;&#x91CC;&#x9762;&#x5B58;&#x653E;&#x4E86;&#x6240;&#x6709;&#x4EE5;data&#x5F00;&#x5934;&#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#xFF0C;&#x5982;&#x679C;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#x91CC;&#x9762;&#x5305;&#x542B;&#x6709;&#x591A;&#x4E2A;&#x8FDE;&#x5B57;&#x7B26;&#xFF08;-&#xFF09;&#x65F6;&#xFF0C;&#x83B7;&#x53D6;&#x7684;&#x65F6;&#x5019;&#x91C7;&#x53D6;&#x9A7C;&#x5CF0;&#x547D;&#x540D;&#x6CD5;&#x3002;</p>
<h2 class="mume-header" id="%E5%9B%9B-%E8%8A%82%E7%82%B9%E5%9F%BA%E7%A1%80">&#x56DB;&#x3001;&#x8282;&#x70B9;&#x57FA;&#x7840;</h2>

<h3 class="mume-header" id="1-%E4%BB%80%E4%B9%88%E6%98%AF%E8%8A%82%E7%82%B9">1&#x3001;&#x4EC0;&#x4E48;&#x662F;&#x8282;&#x70B9;</h3>

<p>HTML&#x6587;&#x6863;&#x53EF;&#x4EE5;&#x770B;&#x4F5C;&#x662F;&#x4E00;&#x4E2A;&#x8282;&#x70B9;&#x6811;&#xFF0C;&#x7F51;&#x9875;&#x4E2D;&#x7684;&#x6240;&#x6709;&#x5185;&#x5BB9;&#x90FD;&#x662F;&#x8282;&#x70B9;&#xFF0C;&#x4E00;&#x822C;&#x6765;&#x8BF4;&#xFF0C;&#x8282;&#x70B9;&#x81F3;&#x5C11;&#x62E5;&#x6709;nodeType&#xFF08;&#x8282;&#x70B9;&#x7C7B;&#x578B;&#xFF09;&#x3001;nodeName&#xFF08;&#x8282;&#x70B9;&#x540D;&#x79F0;&#xFF09;&#x548C;nodeValue&#xFF08;&#x8282;&#x70B9;&#x503C;&#xFF09;&#x8FD9;3&#x4E2A;&#x57FA;&#x672C;&#x5C5E;&#x6027;&#x3002;&#x4E0B;&#x9762;&#x5217;&#x4E3E;&#x5E38;&#x89C1;&#x7684;&#x8282;&#x70B9;&#x7C7B;&#x578B;&#xFF1A;</p>
<ul>
<li>&#x5143;&#x7D20;&#x8282;&#x70B9;&#xFF0C;nodeType&#x4E3A;1</li>
<li>&#x5C5E;&#x6027;&#x8282;&#x70B9;&#xFF0C;nodeType&#x4E3A;2</li>
<li>&#x6587;&#x672C;&#x8282;&#x70B9;&#xFF0C;nodeType&#x4E3A;3&#xFF0C;&#x6587;&#x672C;&#x8282;&#x70B9;&#x5305;&#x542B;&#x6587;&#x5B57;&#x3001;&#x7A7A;&#x683C;&#x3001;&#x6362;&#x884C;&#x7B49;</li>
</ul>
<h3 class="mume-header" id="2-%E8%8A%82%E7%82%B9%E5%B1%82%E7%BA%A7">2&#x3001;&#x8282;&#x70B9;&#x5C42;&#x7EA7;</h3>

<p>&#x4E00;&#x4E2A;HTML&#x6587;&#x4EF6;&#x53EF;&#x4EE5;&#x770B;&#x4F5C;&#x662F;&#x6240;&#x6709;&#x5143;&#x7D20;&#x7EC4;&#x6210;&#x7684;&#x4E00;&#x4E2A;&#x8282;&#x70B9;&#x6811;&#xFF0C;&#x5404;&#x5143;&#x7D20;&#x8282;&#x70B9;&#x4E4B;&#x95F4;&#x6709;&#x7EA7;&#x522B;&#x7684;&#x5212;&#x5206;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>&#x6D4B;&#x8BD5;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x94FE;&#x63A5;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>&#x6BB5;&#x843D;...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</pre><p>DOM&#x6839;&#x636E;HTML&#x4E2D;&#x5404;&#x8282;&#x70B9;&#x7684;&#x4E0D;&#x540C;&#x4F5C;&#x7528;&#xFF0C;&#x53EF;&#x5C06;&#x5176;&#x5206;&#x522B;&#x5212;&#x5206;&#x4E3A;&#x6807;&#x7B7E;&#x8282;&#x70B9;&#xFF08;&#x5143;&#x7D20;&#x8282;&#x70B9;&#xFF09;&#x3001;&#x6587;&#x672C;&#x8282;&#x70B9;&#x548C;&#x5C5E;&#x6027;&#x8282;&#x70B9;&#x3002;&#x8282;&#x70B9;&#x4E4B;&#x95F4;&#x7684;&#x5C42;&#x7EA7;&#x5173;&#x7CFB;&#x5982;&#x4E0B;&#xFF1A;</p>
<ul>
<li>&#x6839;&#x8282;&#x70B9;&#xFF1A;&#x6807;&#x7B7E;&#x662F;&#x6574;&#x4E2A;&#x6587;&#x6863;&#x7684;&#x6839;&#x8282;&#x70B9;&#xFF0C;&#x6709;&#x4E14;&#x4EC5;&#x6709;&#x4E00;&#x4E2A;</li>
<li>&#x7236;&#x8282;&#x70B9;&#xFF1A;&#x6307;&#x7684;&#x662F;&#x67D0;&#x4E00;&#x4E2A;&#x8282;&#x70B9;&#x7684;&#x4E0A;&#x7EA7;&#x8282;&#x70B9;</li>
<li>&#x5B50;&#x8282;&#x70B9;&#xFF1A;&#x6307;&#x7684;&#x662F;&#x67D0;&#x4E00;&#x4E2A;&#x8282;&#x70B9;&#x7684;&#x4E0B;&#x7EA7;&#x8282;&#x70B9;</li>
<li>&#x5144;&#x5F1F;&#x8282;&#x70B9;&#xFF1A;&#x4E24;&#x4E2A;&#x8282;&#x70B9;&#x540C;&#x5C5E;&#x4E8E;&#x4E00;&#x4E2A;&#x7236;&#x8282;&#x70B9;</li>
</ul>
<ol>
<li>&#x83B7;&#x53D6;&#x7236;&#x7EA7;&#x8282;&#x70B9;<br>
&#x5728;JavaScript&#x4E2D;&#xFF0C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;parentNode&#x5C5E;&#x6027;&#x6765;&#x83B7;&#x5F97;&#x79BB;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x7684;&#x6700;&#x8FD1;&#x7684;&#x4E00;&#x4E2A;&#x7236;&#x8282;&#x70B9;&#xFF0C;&#x5982;&#x679C;&#x627E;&#x4E0D;&#x5230;&#x7236;&#x8282;&#x70B9;&#x5C31;&#x8FD4;&#x56DE;&#x4E3A;&#xA0;null&#xFF0C;&#x8BED;&#x6CD5;&#x683C;&#x5F0F;&#x4E3A;&#xFF1A;obj.parentNode&#xFF0C;obj&#x662F;&#x4E00;&#x4E2A;DOM&#x5BF9;&#x8C61;&#x3002;<br>
&#x6848;&#x4F8B;&#x6F14;&#x793A;&#xFF1A;&#x5982;&#x4F55;&#x83B7;&#x53D6;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x7684;&#x7236;&#x8282;&#x70B9;&#x3002;</li>
</ol>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>span&#x5143;&#x7D20;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword keyword-var">var</span> child <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;.child&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &#x83B7;&#x53D6;&#x7C7B;&#x540D;&#x4E3A;child&#x7684;span&#x5143;&#x7D20;</span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>child<span class="token punctuation">.</span><span class="token property-access">parentNode</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &#x8F93;&#x51FA;&#x79BB;child&#x5143;&#x7D20;&#x6700;&#x8FD1;&#x7684;&#x7236;&#x7EA7;&#x8282;&#x70B9;(box) </span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

</pre><ol start="2">
<li>
<p>&#x83B7;&#x53D6;&#x5B50;&#x7EA7;&#x8282;&#x70B9;<br>
&#x5728;JavaScript&#x4E2D;&#xFF0C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;<strong>childNodes</strong>&#x5C5E;&#x6027;&#x6216;&#x8005;<strong>children</strong>&#x5C5E;&#x6027;&#x4E24;&#x79CD;&#x65B9;&#x5F0F;&#x6765;&#x83B7;&#x5F97;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x7684;&#x6240;&#x6709;&#x5B50;&#x8282;&#x70B9;&#x7684;&#x96C6;&#x5408;&#xFF0C;&#x63A5;&#x4E0B;&#x6765;&#x6211;&#x4EEC;&#x5C31;&#x5206;&#x522B;&#x4ECB;&#x7ECD;&#x8FD9;&#x4E24;&#x79CD;&#x65B9;&#x5F0F;&#x7684;&#x7528;&#x6CD5;&#x3002;<br>
<strong>&#x65B9;&#x5F0F;1</strong>&#xFF1A;childNodes&#x5C5E;&#x6027;&#x83B7;&#x5F97;&#x7684;&#x662F;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x7684;&#x6240;&#x6709;&#x5B50;&#x8282;&#x70B9;&#x7684;&#x96C6;&#x5408;&#xFF0C;&#x8BE5;&#x96C6;&#x5408;&#x4E3A;&#x5373;&#x65F6;&#x66F4;&#x65B0;&#x7684;&#x96C6;&#x5408;&#x3002;&#x4E0B;&#x9762;&#x901A;&#x8FC7;&#x6848;&#x4F8B;&#x7684;&#x5F62;&#x5F0F;&#x6F14;&#x793A;&#x5982;&#x4F55;&#x83B7;&#x53D6;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x5B50;&#x8282;&#x70B9;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x6211;&#x662F;li<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x6211;&#x662F;li<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x6211;&#x662F;li<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x6211;&#x662F;li<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword keyword-var">var</span> ul <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;ul&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword keyword-var">var</span> lis <span class="token operator">=</span> ul<span class="token punctuation">.</span><span class="token method function property-access">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&apos;li&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>lis<span class="token punctuation">)</span>
   <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>ul<span class="token punctuation">.</span><span class="token property-access">childNodes</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
   <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>ul<span class="token punctuation">.</span><span class="token property-access">childNodes</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">nodeType</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>ul<span class="token punctuation">.</span><span class="token property-access">childNodes</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">nodeType</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre><p>childNodes&#x5C5E;&#x6027;&#x8FD4;&#x56DE;&#x7684;&#x662F;NodeList&#x5BF9;&#x8C61;&#x7684;&#x96C6;&#x5408;&#xFF0C;&#x8FD4;&#x56DE;&#x503C;&#x91CC;&#x9762;&#x5305;&#x542B;&#x4E86;&#x5143;&#x7D20;&#x8282;&#x70B9;&#x3001;&#x6587;&#x672C;&#x8282;&#x70B9;&#x7B49;&#x5176;&#x4ED6;&#x7C7B;&#x578B;&#x7684;&#x8282;&#x70B9;&#x3002;</p>
<p><strong>&#x65B9;&#x5F0F;2</strong>&#xFF1A;children&#x662F;&#x4E00;&#x4E2A;&#x53EF;&#x8BFB;&#x7684;&#x5C5E;&#x6027;&#xFF0C;&#x8FD4;&#x56DE;&#x6240;&#x6709;&#x5B50;&#x5143;&#x7D20;&#x8282;&#x70B9;&#x3002;children&#x53EA;&#x8FD4;&#x56DE;&#x5B50;&#x5143;&#x7D20;&#x8282;&#x70B9;&#xFF0C;&#x5176;&#x4F59;&#x8282;&#x70B9;&#x4E0D;&#x8FD4;&#x56DE;&#xFF0C;&#x76EE;&#x524D;&#x5404;&#x5927;&#x6D4F;&#x89C8;&#x5668;&#x90FD;&#x652F;&#x6301;&#x8BE5;&#x5C5E;&#x6027;&#xFF0C;&#x5728;&#x5B9E;&#x9645;&#x5F00;&#x53D1;&#x4E2D;&#x63A8;&#x8350;&#x4F7F;&#x7528;children&#x3002;<br>
&#x63A5;&#x4E0B;&#x6765;&#xFF0C;&#x901A;&#x8FC7;&#x6848;&#x4F8B;&#x7684;&#x5F62;&#x5F0F;&#x6F14;&#x793A;&#x5982;&#x4F55;&#x83B7;&#x53D6;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x5B50;&#x8282;&#x70B9;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x6211;&#x662F;li<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x6211;&#x662F;li<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x6211;&#x662F;li<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x6211;&#x662F;li<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword keyword-var">var</span> ul <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;ol&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword keyword-var">var</span> lis <span class="token operator">=</span> ul<span class="token punctuation">.</span><span class="token method function property-access">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&apos;li&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>ul<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//  &#x7ED3;&#x679C;&#x4E3A;&#xFF1A;HTMLCollection(4) [li, li, li, li]</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre><p><strong>&#x503C;&#x5F97;&#x4E00;&#x63D0;</strong> :childNodes&#x5C5E;&#x6027;&#x4E0E;children&#x5C5E;&#x6027;&#x867D;&#x7136;&#x90FD;&#x53EF;&#x4EE5;&#x83B7;&#x53D6;&#x67D0;&#x5143;&#x7D20;&#x7684;&#x5B50;&#x5143;&#x7D20;&#xFF0C;&#x4F46;&#x662F;&#x4E24;&#x8005;&#x4E4B;&#x95F4;&#x6709;&#x4E00;&#x5B9A;&#x7684;&#x533A;&#x522B;&#x3002;&#x524D;&#x8005;&#x7528;&#x4E8E;&#x8282;&#x70B9;&#x64CD;&#x4F5C;&#xFF0C;&#x8FD4;&#x56DE;&#x503C;&#x662F;NodeList&#x5BF9;&#x8C61;&#x96C6;&#x5408;&#xFF0C;&#x540E;&#x8005;&#x7528;&#x4E8E;&#x5143;&#x7D20;&#x64CD;&#x4F5C;&#xFF0C;&#x8FD4;&#x56DE;&#x7684;&#x662F;HTMLCollection&#x5BF9;&#x8C61;&#x96C6;&#x5408;&#x3002;</p>
<p><strong>&#x65B9;&#x5F0F;3</strong> &#xFF1A;&#x4F7F;&#x7528;firstChild&#x5C5E;&#x6027;&#x548C;lastChild&#x5C5E;&#x6027;&#x83B7;&#x53D6;&#x5B50;&#x8282;&#x70B9;&#xFF0C;&#x524D;&#x8005;&#x8FD4;&#x56DE;&#x7B2C;&#x4E00;&#x4E2A;&#x5B50;&#x8282;&#x70B9;&#xFF0C;&#x540E;&#x8005;&#x8FD4;&#x56DE;&#x7684;&#x662F;&#x6700;&#x540E;&#x4E00;&#x4E2A;&#x5B50;&#x8282;&#x70B9;&#xFF0C;&#x5982;&#x679C;&#x627E;&#x4E0D;&#x5230;&#x5219;&#x8FD4;&#x56DE;null&#x3002;&#x9700;&#x8981;&#x6CE8;&#x610F;&#x7684;&#x662F;&#x5B83;&#x4EEC;&#x7684;&#x8FD4;&#x56DE;&#x503C;&#x5305;&#x62EC;&#x6587;&#x672C;&#x8282;&#x70B9;&#x548C;&#x5143;&#x7D20;&#x8282;&#x70B9;&#x7B49;&#x3002;</p>
<p><strong>&#x65B9;&#x5F0F;4</strong> &#xFF1A;&#x4F7F;&#x7528;firstElementChild&#x5C5E;&#x6027;&#x548C;lastElementChild&#x5C5E;&#x6027;&#x83B7;&#x53D6;&#x5B50;&#x5143;&#x7D20;&#x8282;&#x70B9;&#xFF0C;&#x524D;&#x8005;&#x8FD4;&#x56DE;&#x7B2C;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;&#x8282;&#x70B9;&#xFF0C;&#x540E;&#x8005;&#x8FD4;&#x56DE;&#x6700;&#x540E;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;&#x8282;&#x70B9;&#xFF0C;&#x5982;&#x679C;&#x627E;&#x4E0D;&#x5230;&#x5219;&#x8FD4;&#x56DE;null&#x3002;&#x9700;&#x8981;&#x6CE8;&#x610F;&#x7684;&#x662F;&#xFF0C;&#x8FD9;&#x4E24;&#x4E2A;&#x5C5E;&#x6027;&#x6709;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF0C;IE9&#x4EE5;&#x4E0A;&#x624D;&#x652F;&#x6301;&#x3002;</p>
</li>
</ol>
<p><strong>&#x6CE8;&#x610F;</strong> &#x5B9E;&#x9645;&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;firstChild &#x548C;lastChild &#x5305;&#x542B;&#x5176;&#x4ED6;&#x8282;&#x70B9;&#xFF0C;&#x64CD;&#x4F5C;&#x4E0D;&#x65B9;&#x4FBF;&#xFF0C;&#x800C;firstElementChild&#x548C;lastElementChild&#x53C8;&#x6709;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF0C;&#x4E3A;&#x4E86;&#x89E3;&#x51B3;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF0C;&#x5728;&#x5B9E;&#x9645;&#x5F00;&#x53D1;&#x4E2D;&#x901A;&#x5E38;&#x4F7F;&#x7528;&#x201C;obj.children[&#x7D22;&#x5F15;] &#x201D;&#x7684;&#x65B9;&#x5F0F;&#x6765;&#x83B7;&#x53D6;&#x5B50;&#x5143;&#x7D20;&#x8282;&#x70B9;&#x3002;</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript">obj<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>			   <span class="token comment">// &#x83B7;&#x53D6;&#x7B2C;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;&#x8282;&#x70B9;</span>
obj<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">[</span>obj<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span>   <span class="token comment">// &#x83B7;&#x53D6;&#x6700;&#x540E;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;&#x8282;&#x70B9;</span>

</pre><ol start="3">
<li>
<p>&#x83B7;&#x53D6;&#x5144;&#x5F1F;&#x8282;&#x70B9;<br>
&#x5728;JavaScript&#x4E2D;&#xFF0C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;<strong>nextSibling</strong>&#x5C5E;&#x6027;&#x83B7;&#x5F97;&#x4E0B;&#x4E00;&#x4E2A;&#x5144;&#x5F1F;&#x8282;&#x70B9;&#xFF0C;&#x6216;&#x8005;&#x4F7F;&#x7528;<strong>previousSibling</strong>&#x5C5E;&#x6027;&#x83B7;&#x5F97;&#x4E0A;&#x4E00;&#x4E2A;&#x5144;&#x5F1F;&#x8282;&#x70B9;&#xFF0C;&#x5B83;&#x4EEC;&#x7684;&#x8FD4;&#x56DE;&#x503C;&#x5305;&#x542B;&#x5143;&#x7D20;&#x8282;&#x70B9;&#x6216;&#x8005;&#x6587;&#x672C;&#x8282;&#x70B9;&#x7B49;&#x3002;&#x5982;&#x679C;&#x627E;&#x4E0D;&#x5230;&#xFF0C;&#x5C31;&#x8FD4;&#x56DE;null&#x3002;</p>
<p>&#x53EF;&#x4EE5;&#x4F7F;&#x7528;nextElementSibling&#x8FD4;&#x56DE;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x7684;&#x4E0B;&#x4E00;&#x4E2A;&#x5144;&#x5F1F;&#x5143;&#x7D20;&#x8282;&#x70B9;&#xFF0C;previousElementSibling&#x5C5E;&#x6027;&#x8FD4;&#x56DE;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x7684;&#x4E0A;&#x4E00;&#x4E2A;&#x5144;&#x5F1F;&#x5143;&#x7D20;&#x8282;&#x70B9;&#xFF0C;&#x5982;&#x679C;&#x627E;&#x4E0D;&#x5230;&#x5219;&#x8FD4;&#x56DE;null&#x3002;&#x9700;&#x8981;&#x6CE8;&#x610F;&#x7684;&#x662F;&#xFF0C;&#x8FD9;&#x4E24;&#x4E2A;&#x5C5E;&#x6027;&#x6709;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF0C;IE9&#x4EE5;&#x4E0A;&#x624D;&#x652F;&#x6301;&#x3002;</p>
<p>&#x5B9E;&#x9645;&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;nextSibling&#x548C;previousSibling&#x5C5E;&#x6027;&#x8FD4;&#x56DE;&#x503C;&#x90FD;&#x5305;&#x542B;&#x5176;&#x4ED6;&#x8282;&#x70B9;&#xFF0C;&#x64CD;&#x4F5C;&#x4E0D;&#x65B9;&#x4FBF;&#xFF0C;&#x800C;nextElementSibling&#x548C;previousElementSibling&#x53C8;&#x6709;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#x3002;&#x4E3A;&#x4E86;&#x89E3;&#x51B3;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF0C;&#x5728;&#x5B9E;&#x9645;&#x5F00;&#x53D1;&#x4E2D;&#x901A;&#x5E38;&#x4F7F;&#x7528;&#x5C01;&#x88C5;&#x51FD;&#x6570;&#x6765;&#x5904;&#x7406;&#x517C;&#x5BB9;&#x6027;&#x3002;</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword keyword-function">function</span> <span class="token function">getNextElementSibling</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token keyword keyword-var">var</span> el <span class="token operator">=</span> element<span class="token punctuation">;</span>
       <span class="token keyword control-flow keyword-while">while</span> <span class="token punctuation">(</span><span class="token parameter">el <span class="token operator">=</span> el<span class="token punctuation">.</span><span class="token property-access">nextSibling</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span><span class="token property-access">nodeType</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
           <span class="token keyword control-flow keyword-return">return</span> el<span class="token punctuation">;</span> 
          <span class="token punctuation">}</span>
     <span class="token punctuation">}</span>
  <span class="token keyword control-flow keyword-return">return</span> <span class="token keyword null nil keyword-null">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre></li>
</ol>
<h3 class="mume-header" id="3-%E6%A1%88%E4%BE%8B%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95">3&#x3001;&#x3010;&#x6848;&#x4F8B;&#x3011;&#x4E0B;&#x62C9;&#x83DC;&#x5355;</h3>

<p>&#x6848;&#x4F8B;&#x9700;&#x6C42;&#xFF1A;&#x9F20;&#x6807;&#x6307;&#x9488;&#x7ECF;&#x8FC7;&#x83DC;&#x5355;&#x65F6;&#xFF0C;&#x663E;&#x793A;&#x5F53;&#x524D;&#x4E0B;&#x62C9;&#x6846;&#x4E2D;&#x7684;&#x5185;&#x5BB9;&#x540C;&#x65F6;&#x9690;&#x85CF;&#x5176;&#x4ED6;&#x4E0B;&#x62C9;&#x83DC;&#x5355;&#x5185;&#x5BB9;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- &#x7F16;&#x5199;HTML&#x7ED3;&#x6784;&#x4EE3;&#x7801; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x5FAE;&#x535A;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
     ...  &#xFF08;&#x6B64;&#x5904;&#x7701;&#x7565;3&#x4E2A;li&#xFF09;
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &#x9F20;&#x6807;&#x7ECF;&#x8FC7;&#xFF0C;&#x5C55;&#x793A;&#x5F53;&#x524D;&#x4E0B;&#x62C9;&#x5217;&#x8868;&#x5185;&#x5BB9; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword keyword-var">var</span> nav <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;.nav&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1. &#x83B7;&#x53D6;&#x5143;&#x7D20;</span>
  <span class="token keyword keyword-var">var</span> lis <span class="token operator">=</span> nav<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">;</span> 
    <span class="token keyword control-flow keyword-for">for</span> <span class="token punctuation">(</span><span class="token keyword keyword-var">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> lis<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> 
    lis<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onmouseover</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token comment">// 2. &#x6CE8;&#x518C;&#x9F20;&#x6807;&#x6307;&#x9488;&#x7ECF;&#x8FC7;&#x548C;&#x9F20;&#x6807;&#x6307;&#x9488;&#x79BB;&#x5F00;&#x4E8B;&#x4EF6;</span>
      <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">display</span> <span class="token operator">=</span> <span class="token string">&apos;block&apos;</span><span class="token punctuation">;</span>  <span class="token comment">// ul&#x4E3A;li&#x7684;&#x7B2C;2&#x4E2A;&#x5B50;&#x5143;&#x7D20;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    lis<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onmouseout</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">display</span> <span class="token operator">=</span> <span class="token string">&apos;none&apos;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>            
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

</pre><h2 class="mume-header" id="%E4%BA%94-%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C">&#x4E94;&#x3001;&#x8282;&#x70B9;&#x64CD;&#x4F5C;</h2>

<h3 class="mume-header" id="1-%E5%88%9B%E5%BB%BA%E8%8A%82%E7%82%B9">1&#x3001;&#x521B;&#x5EFA;&#x8282;&#x70B9;</h3>

<p>&#x5728;DOM&#x4E2D;&#xFF0C;&#x4F7F;&#x7528; <strong>document.createElement(&apos;tagName&apos;)</strong> &#x65B9;&#x6CD5;&#x521B;&#x5EFA;&#x7531;tagName&#x6307;&#x5B9A;&#x7684;HTML&#x5143;&#x7D20;&#xFF0C;&#x4E5F;&#x79F0;&#x4E3A;&#x52A8;&#x6001;&#x521B;&#x5EFA;&#x5143;&#x7D20;&#x8282;&#x70B9;&#x3002;<br>
&#x52A8;&#x6001;&#x521B;&#x5EFA;&#x5143;&#x7D20;&#x8282;&#x70B9;&#x7684;3&#x79CD;&#x5E38;&#x89C1;&#x65B9;&#x5F0F;&#x5982;&#x4E0B;&#xFF1A;</p>
<ul>
<li>document.write()&#x521B;&#x5EFA;&#x5143;&#x7D20;&#xFF0C;&#x5982;&#x679C;&#x9875;&#x9762;&#x6587;&#x6863;&#x6D41;&#x52A0;&#x8F7D;&#x5B8C;&#x6BD5;&#xFF0C;&#x518D;&#x8C03;&#x7528;&#x4F1A;&#x5BFC;&#x81F4;&#x9875;&#x9762;&#x91CD;&#x7ED8;</li>
<li>element.innerHTML&#x5C06;&#x5185;&#x5BB9;&#x5199;&#x5165;&#x67D0;&#x4E2A;DOM&#x8282;&#x70B9;&#xFF0C;&#x4E0D;&#x4F1A;&#x5BFC;&#x81F4;&#x9875;&#x9762;&#x5168;&#x90E8;&#x91CD;&#x7ED8;</li>
<li>document.createElement()&#x521B;&#x5EFA;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x6548;&#x7387;&#x7A0D;&#x5FAE;&#x4F4E;&#x4E00;&#x70B9;&#xFF0C;&#x4F46;&#x662F;&#x7ED3;&#x6784;&#x66F4;&#x52A0;&#x6E05;&#x6670;</li>
</ul>
<h3 class="mume-header" id="2-%E6%B7%BB%E5%8A%A0%E5%92%8C%E5%88%A0%E9%99%A4%E8%8A%82%E7%82%B9">2&#x3001;&#x6DFB;&#x52A0;&#x548C;&#x5220;&#x9664;&#x8282;&#x70B9;</h3>

<p>DOM&#x4E2D;&#xFF0C;&#x63D0;&#x4F9B;&#x4E86; <strong>node.appendChild()</strong> &#x548C; <strong>node.insertBefore()</strong> &#x65B9;&#x6CD5;&#x7528;&#x4E8E;&#x6DFB;&#x52A0;&#x8282;&#x70B9;&#xFF0C; <strong>node. removeChild(child)</strong> &#x7528;&#x4E8E;&#x5220;&#x9664;&#x8282;&#x70B9;&#x3002;<br>
&#x4E0B;&#x9762;&#x8BB2;&#x89E3;&#x8FD9;3&#x79CD;&#x65B9;&#x6CD5;&#x7684;&#x4F7F;&#x7528;&#x3002;</p>
<ul>
<li>appendChild()&#x65B9;&#x6CD5;&#xFF0C;&#x5C06;&#x4E00;&#x4E2A;&#x8282;&#x70B9;&#x6DFB;&#x52A0;&#x5230;&#x6307;&#x5B9A;&#x7236;&#x8282;&#x70B9;&#x7684;&#x5B50;&#x8282;&#x70B9;&#x5217;&#x8868;&#x672B;&#x5C3E;</li>
<li>insertBefore(child, &#x6307;&#x5B9A;&#x5143;&#x7D20;)&#x65B9;&#x6CD5;&#xFF0C;&#x5C06;&#x4E00;&#x4E2A;&#x8282;&#x70B9;&#x6DFB;&#x52A0;&#x5230;&#x7236;&#x8282;&#x70B9;&#x7684;&#x6307;&#x5B9A;&#x5B50;&#x8282;&#x70B9;&#x524D;&#x9762;</li>
<li>removeChild(child)&#x7528;&#x4E8E;&#x5220;&#x9664;&#x8282;&#x70B9;&#xFF0C;&#x8BE5;&#x65B9;&#x6CD5;&#x4ECE;DOM&#x4E2D;&#x5220;&#x9664;&#x4E00;&#x4E2A;&#x5B50;&#x8282;&#x70B9;&#xFF0C;&#x8FD4;&#x56DE;&#x5220;&#x9664;&#x7684;&#x8282;&#x70B9;</li>
</ul>
<h3 class="mume-header" id="3-%E6%A1%88%E4%BE%8B%E7%AE%80%E6%98%93%E7%95%99%E8%A8%80%E6%9D%BF">3&#x3001;&#x3010;&#x6848;&#x4F8B;&#x3011;&#x7B80;&#x6613;&#x7559;&#x8A00;&#x677F;</h3>

<p>&#x6848;&#x4F8B;&#x5206;&#x6790;&#xFF1A;&#x5229;&#x7528;&#x8282;&#x70B9;&#x7684;&#x521B;&#x5EFA;&#x3001;&#x6DFB;&#x52A0;&#x548C;&#x5220;&#x9664;&#x76F8;&#x5173;&#x77E5;&#x8BC6;&#x5B8C;&#x6210;&#x4E00;&#x4E2A;&#x7B80;&#x6613;&#x7684;&#x7559;&#x8A00;&#x677F;&#x529F;&#x80FD;&#x3002;&#x5728;&#x9875;&#x9762;&#x4E2D;&#x5B9E;&#x73B0;&#x5355;&#x51FB;&#x201C;&#x53D1;&#x5E03;&#x201D;&#x6309;&#x94AE;&#x52A8;&#x6001;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;li&#x5143;&#x7D20;&#xFF0C;&#x6DFB;&#x52A0;&#x5230;ul&#x91CC;&#x9762;&#x3002;&#x6848;&#x4F8B;&#x5B9E;&#x73B0;&#x6B65;&#x9AA4;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- &#x7F16;&#x5199;HTML&#x7ED3;&#x6784;&#xFF0C;&#x5B8C;&#x6210;&#x9875;&#x9762;&#x5E03;&#x5C40; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">&gt;</span></span> // &#x7528;&#x6237;&#x8F93;&#x5165;&#x7559;&#x8A00;
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>&#x53D1;&#x5E03;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span> // &#x7528;&#x4E8E;&#x5C55;&#x793A;&#x7559;&#x8A00;&#x6A21;&#x5757;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
     <span class="token comment">// 1. &#x83B7;&#x53D6;&#x5143;&#x7D20;</span>
     <span class="token keyword keyword-var">var</span> btn <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;button&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token keyword keyword-var">var</span> text <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;textarea&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token keyword keyword-var">var</span> ul <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;ul&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token comment">// &#x6DFB;&#x52A0;&#x7559;&#x8A00;&#x529F;&#x80FD;&#xFF1A;&#x6CE8;&#x518C;&#x4E8B;&#x4EF6;&#xFF0C;&#x6DFB;&#x52A0;&#x7559;&#x8A00;</span>
     btn<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onclick</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span>text<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">==</span> <span class="token string">&apos;&apos;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
           <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&apos;&#x60A8;&#x6CA1;&#x6709;&#x8F93;&#x5165;&#x5185;&#x5BB9;&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
           <span class="token keyword control-flow keyword-return">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
         <span class="token punctuation">}</span> <span class="token keyword control-flow keyword-else">else</span> <span class="token punctuation">{</span>  <span class="token comment">// (1) &#x521B;&#x5EFA;&#x5143;&#x7D20;</span>
           <span class="token keyword keyword-var">var</span> li <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span><span class="token string">&apos;li&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
          li<span class="token punctuation">.</span><span class="token property-access">innerHTML</span> <span class="token operator">=</span> text<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">+</span> <span class="token string">&apos;&lt;a href=&quot;javascript:;&quot;&gt;&#x5220;&#x9664;&lt;/a&gt;&apos;</span><span class="token punctuation">;</span><span class="token punctuation">;</span>
            ul<span class="token punctuation">.</span><span class="token method function property-access">insertBefore</span><span class="token punctuation">(</span>li<span class="token punctuation">,</span> ul<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// (2) &#x6DFB;&#x52A0;&#x5143;&#x7D20;</span>
          <span class="token comment">// &#x2026; (3) &#x6B64;&#x5904;&#x7F16;&#x5199;&#x5220;&#x9664;&#x7559;&#x8A00;&#x529F;&#x80FD;</span>
         <span class="token punctuation">}</span>
       <span class="token punctuation">}</span><span class="token punctuation">;</span>
     <span class="token comment">// &#x5220;&#x9664;&#x7559;&#x8A00;&#x529F;&#x80FD;&#xFF1A;&#x9996;&#x5148;&#x5728;&#x6DFB;&#x52A0;li&#x65F6;&#xFF0C;&#x7ED9;li&#x4E2D;&#x589E;&#x52A0;&#x4E00;&#x4E2A;a&#x94FE;&#x63A5;&#xFF0C;&#x7ED9;&#x6240;&#x6709;&#x7684;a&#x94FE;&#x63A5;&#x6CE8;&#x518C;&#x5355;&#x51FB;&#x4E8B;&#x4EF6;&#xFF0C;&#x627E;&#x5230;a&#x7684;&#x7236;&#x8282;&#x70B9;li&#xFF0C;&#x8FDB;&#x884C;&#x5220;&#x9664;&#x5373;&#x53EF;&#x3002;</span>
     <span class="token comment">// &#x4FEE;&#x6539;&#x7B2C;&#xFF08;2&#xFF09;&#x6B65;&#x4E2D;&#x4EE3;&#x7801;&#xFF0C;&#x627E;&#x5230;&#x5982;&#x4E0B;&#x6240;&#x793A;&#x4EE3;&#x7801;</span>
     <span class="token comment">// li.innerHTML = text.value; </span>
     <span class="token comment">// &#x4FEE;&#x6539;&#x4E3A;</span>
     <span class="token comment">// li.innerHTML = text.value + &apos;&lt;a href=&quot;javascript:;&quot;&gt;&#x5220;&#x9664;&lt;/a&gt;&apos;;</span>

     <span class="token comment">// &#x5220;&#x9664;&#x7559;&#x8A00;&#x529F;&#x80FD;&#xFF1A;&#x6CE8;&#x518C;&#x4E8B;&#x4EF6;&#xFF0C;&#x5220;&#x9664;&#x7559;&#x8A00;</span>
     <span class="token keyword keyword-var">var</span> <span class="token keyword module keyword-as">as</span> <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&apos;a&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token keyword control-flow keyword-for">for</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword keyword-var">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token keyword module keyword-as">as</span><span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> i<span class="token operator">++</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token keyword module keyword-as">as</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onclick</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         ul<span class="token punctuation">.</span><span class="token method function property-access">removeChild</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">parentNode</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
       <span class="token punctuation">}</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre><h3 class="mume-header" id="4-%E5%A4%8D%E5%88%B6%E8%8A%82%E7%82%B9">4&#x3001;&#x590D;&#x5236;&#x8282;&#x70B9;</h3>

<p>&#x5728;DOM&#x4E2D;&#xFF0C;&#x63D0;&#x4F9B;&#x4E86; <strong>node.cloneNode()</strong> &#x65B9;&#x6CD5;&#xFF0C;&#x8FD4;&#x56DE;&#x8C03;&#x7528;&#x8BE5;&#x65B9;&#x6CD5;&#x7684;&#x8282;&#x70B9;&#x7684;&#x4E00;&#x4E2A;&#x526F;&#x672C;&#xFF0C;&#x4E5F;&#x79F0;&#x4E3A;&#x514B;&#x9686;&#x8282;&#x70B9;&#x6216;&#x8005;&#x62F7;&#x8D1D;&#x8282;&#x70B9;&#x3002;&#x8BED;&#x6CD5;&#x4E3A;&#x201C;&#x9700;&#x8981;&#x88AB;&#x590D;&#x5236;&#x7684;&#x8282;&#x70B9;.cloneChild(true/false) &#x201D;&#x3002;&#x5982;&#x679C;&#x53C2;&#x6570;&#x4E3A;&#x7A7A;&#x6216;false&#xFF0C;&#x5219;&#x662F;&#x6D45;&#x62F7;&#x8D1D;&#xFF0C;&#x5373;&#x53EA;&#x590D;&#x5236;&#x8282;&#x70B9;&#x672C;&#x8EAB;&#xFF0C;&#x4E0D;&#x590D;&#x5236;&#x91CC;&#x9762;&#x7684;&#x5B50;&#x8282;&#x70B9;&#xFF1B;&#x5982;&#x679C;&#x62EC;&#x53F7;&#x53C2;&#x6570;&#x4E3A;true&#xFF0C;&#x5219;&#x662F;&#x6DF1;&#x62F7;&#x8D1D;&#xFF0C;&#x5373;&#x4F1A;&#x590D;&#x5236;&#x8282;&#x70B9;&#x672C;&#x8EAB;&#x53CA;&#x91CC;&#x9762;&#x6240;&#x6709;&#x7684;&#x5B50;&#x8282;&#x70B9;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>myList<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x82F9;&#x679C;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x6A59;&#x5B50;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x6A58;&#x5B50;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>op<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>&#x70B9;&#x6211;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword keyword-function">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword keyword-var">var</span> item <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">&apos;myList&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">firstChild</span><span class="token punctuation">;</span>
      <span class="token keyword keyword-var">var</span> cloneItem <span class="token operator">=</span> item<span class="token punctuation">.</span><span class="token method function property-access">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">&apos;op&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">appendChild</span><span class="token punctuation">(</span>cloneItem<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</pre><h2 class="mume-header" id="%E5%85%AD-%E4%BA%8B%E4%BB%B6%E8%BF%9B%E9%98%B6">&#x516D;&#x3001;&#x4E8B;&#x4EF6;&#x8FDB;&#x9636;</h2>

<h3 class="mume-header" id="1-%E6%B3%A8%E5%86%8C%E4%BA%8B%E4%BB%B6">1&#x3001;&#x6CE8;&#x518C;&#x4E8B;&#x4EF6;</h3>

<p>&#x5728;JavaScript&#x4E2D;&#xFF0C;&#x6CE8;&#x518C;&#x4E8B;&#x4EF6;&#xFF08;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#xFF09;&#x6709;&#x4E24;&#x79CD;&#x65B9;&#x5F0F;&#xFF0C;&#x5373; <strong>&#x4F20;&#x7EDF;&#x65B9;&#x5F0F;&#x6CE8;&#x518C;&#x4E8B;&#x4EF6;</strong> &#x548C; <strong>&#x4E8B;&#x4EF6;&#x76D1;&#x542C;</strong> &#x65B9;&#x5F0F;&#x6CE8;&#x518C;&#x4E8B;&#x4EF6;&#x3002;&#x4E0B;&#x9762;&#x5206;&#x522B;&#x9488;&#x5BF9;&#x8FD9;&#x4E24;&#x79CD;&#x65B9;&#x5F0F;&#x8FDB;&#x884C;&#x8BB2;&#x89E3;&#x3002;</p>
<ol>
<li>
<p>&#x4F20;&#x7EDF;&#x65B9;&#x5F0F;</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token comment">// &#x5143;&#x7D20;&#x5BF9;&#x8C61;.&#x4E8B;&#x4EF6; = &#x4E8B;&#x4EF6;&#x7684;&#x5904;&#x7406;&#x7A0B;&#x5E8F;;</span>
<span class="token comment">// &#x793A;&#x4F8B;</span>
oBtn<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onclick</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token punctuation">}</span>

</pre><p>&#x6CE8;&#x610F;&#xFF1A;&#x8BE5;&#x65B9;&#x5F0F;&#x6CE8;&#x518C;&#x4E8B;&#x4EF6;&#x7684;&#x7279;&#x70B9;&#x5728;&#x4E8E;&#x6CE8;&#x518C;&#x4E8B;&#x4EF6;&#x7684;&#x552F;&#x4E00;&#x6027;&#xFF0C;&#x5373;&#x540C;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x540C;&#x4E00;&#x4E2A;&#x4E8B;&#x4EF6;&#x53EA;&#x80FD;&#x8BBE;&#x7F6E;&#x4E00;&#x4E2A;&#x5904;&#x7406;&#x51FD;&#x6570;&#xFF0C;&#x6700;&#x540E;&#x6CE8;&#x518C;&#x7684;&#x5904;&#x7406;&#x51FD;&#x6570;&#x5C06;&#x4F1A;&#x8986;&#x76D6;&#x524D;&#x9762;&#x6CE8;&#x518C;&#x7684;&#x5904;&#x7406;&#x51FD;&#x6570;&#x3002;</p>
</li>
<li>
<p>&#x4E8B;&#x4EF6;&#x76D1;&#x542C;&#x65B9;&#x5F0F;<br>
&#x7531;&#x4E8E;&#x4E0D;&#x540C;&#x6D4F;&#x89C8;&#x5668;&#x91C7;&#x7528;&#x7684;&#x4E8B;&#x4EF6;&#x6D41;&#x5B9E;&#x73B0;&#x65B9;&#x5F0F;&#x4E0D;&#x540C;&#xFF0C;&#x4E8B;&#x4EF6;&#x76D1;&#x542C;&#x7684;&#x5B9E;&#x73B0;&#x5B58;&#x5728;<strong>&#x517C;&#x5BB9;&#x6027;</strong>&#x95EE;&#x9898;&#x3002;&#x901A;&#x5E38;&#x6839;&#x636E;&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x5185;&#x6838;&#xFF0C;&#x53EF;&#x4EE5;&#x628A;&#x6D4F;&#x89C8;&#x5668;&#x5212;&#x5206;&#x4E3A;&#x4E24;&#x5927;&#x7C7B;&#xFF0C;&#x4E00;&#x7C7B;&#x662F;<strong>&#x65E9;&#x671F;&#x7248;&#x672C;&#x7684;IE&#x6D4F;&#x89C8;&#x5668;</strong>&#xFF08;&#x5982;IE 6~IE 8&#xFF09;&#xFF0C;&#x4E00;&#x7C7B;&#x662F;&#x9075;&#x5FAA;<strong>W3C&#x6807;&#x51C6;&#x7684;&#x6D4F;&#x89C8;&#x5668;</strong>&#xFF08;&#x4EE5;&#x4E0B;&#x7B80;&#x79F0;&#x6807;&#x51C6;&#x6D4F;&#x89C8;&#x5668;&#xFF09;&#x3002;<br>
&#x6CE8;&#x610F;&#xFF1A;&#x8BE5;&#x65B9;&#x5F0F;&#x6CE8;&#x518C;&#x4E8B;&#x4EF6;&#x7684;&#x7279;&#x70B9;&#x5728;&#x4E8E;&#x53EF;&#x4EE5;&#x7ED9;&#x540C;&#x4E00;&#x4E2A;DOM&#x5BF9;&#x8C61;&#x7684;&#x540C;&#x4E00;&#x4E2A;&#x4E8B;&#x4EF6;&#x6DFB;&#x52A0;&#x591A;&#x4E2A;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x7A0B;&#x5E8F;&#x3002;<br>
&#x65E9;&#x671F;IE&#x5185;&#x6838;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#xFF0C;&#x4E8B;&#x4EF6;&#x76D1;&#x542C;&#x65B9;&#x5F0F;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token comment">//type DOM&#x5BF9;&#x8C61;&#x7ED1;&#x5B9A;&#x7684;&#x4E8B;&#x4EF6;&#x7C7B;&#x578B;&#xFF0C;&#x5982;onclick</span>
<span class="token comment">//callback &#x4E8B;&#x4EF6;&#x7684;&#x5904;&#x7406;&#x7A0B;&#x5E8F;</span>
<span class="token constant">DOM</span>&#x5BF9;&#x8C61;<span class="token punctuation">.</span><span class="token method function property-access">attachEvent</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><p>&#x6807;&#x51C6;&#x6D4F;&#x89C8;&#x5668;&#xFF0C;&#x5305;&#x62EC;IE8&#x7248;&#x672C;&#x4EE5;&#x4E0A;&#x7684;IE&#x6D4F;&#x89C8;&#x5668;&#xFF0C;&#x4EE5;&#x53CA;&#x65B0;&#x7248;&#x7684;Firefox&#x3001;Chrome&#x7B49;&#x6D4F;&#x89C8;&#x5668;&#xFF0C;&#x4E8B;&#x4EF6;&#x76D1;&#x542C;&#x65B9;&#x5F0F;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token comment">//type DOM&#x5BF9;&#x8C61;&#x7ED1;&#x5B9A;&#x7684;&#x4E8B;&#x4EF6;&#x7C7B;&#x578B;&#xFF0C;&#x5982;click</span>
<span class="token comment">//callback &#x4E8B;&#x4EF6;&#x7684;&#x5904;&#x7406;&#x7A0B;&#x5E8F;</span>
<span class="token comment">//capture &#x9ED8;&#x8BA4;&#x4E3A;false&#xFF0C;&#x8868;&#x793A;&#x5192;&#x6CE1;&#x9636;&#x6BB5;&#x5B8C;&#x6210;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#xFF0C;true&#x4E3A;&#x6355;&#x83B7;&#x9636;&#x6BB5;&#x5B8C;&#x6210;&#x4E8B;&#x4EF6;&#x5904;&#x7406;</span>
<span class="token constant">DOM</span>&#x5BF9;&#x8C61;<span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> <span class="token punctuation">[</span>capture<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></li>
</ol>
<h3 class="mume-header" id="2-%E5%88%A0%E9%99%A4%E4%BA%8B%E4%BB%B6">2&#x3001;&#x5220;&#x9664;&#x4E8B;&#x4EF6;</h3>

<p>&#x4E8B;&#x4EF6;&#x76D1;&#x542C;&#x7684;&#x79FB;&#x9664;&#x4E5F;&#x9700;&#x8981;&#x8003;&#x8651;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF0C;&#x793A;&#x4F8B;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#x3002;</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token constant">DOM</span>&#x5BF9;&#x8C61;<span class="token punctuation">.</span><span class="token property-access">onclick</span> <span class="token operator">=</span> <span class="token keyword null nil keyword-null">null</span><span class="token punctuation">;</span>                        	     <span class="token comment">// &#x4F20;&#x7EDF;&#x65B9;&#x5F0F;&#x5220;&#x9664;&#x4E8B;&#x4EF6;</span>
<span class="token constant">DOM</span>&#x5BF9;&#x8C61;<span class="token punctuation">.</span><span class="token method function property-access">detachEvent</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span>	     <span class="token comment">// &#x65E9;&#x671F;&#x7248;&#x672C;IE&#x6D4F;&#x89C8;&#x5668;</span>
<span class="token constant">DOM</span>&#x5BF9;&#x8C61;<span class="token punctuation">.</span><span class="token method function property-access">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// &#x6807;&#x51C6;&#x6D4F;&#x89C8;&#x5668;</span>
</pre><h3 class="mume-header" id="3-dom%E4%BA%8B%E4%BB%B6%E6%B5%81">3&#x3001;DOM&#x4E8B;&#x4EF6;&#x6D41;</h3>

<p>&#x4E8B;&#x4EF6;&#x6D41;&#x662F;&#x6307;&#x5F53;&#x4E8B;&#x4EF6;&#x53D1;&#x751F;&#x65F6;&#xFF0C;&#x4F1A;&#x5728;&#x53D1;&#x751F;&#x4E8B;&#x4EF6;&#x7684;&#x5143;&#x7D20;&#x8282;&#x70B9;&#x4E0E;DOM&#x6811;&#x6839;&#x8282;&#x70B9;&#x4E4B;&#x95F4;&#x6309;&#x7167;&#x7279;&#x5B9A;&#x7684;&#x987A;&#x5E8F;&#x8FDB;&#x884C;&#x4F20;&#x64AD;&#xFF0C;&#x8FD9;&#x4E2A;&#x8FC7;&#x7A0B;&#x79F0;&#x4E4B;&#x4E3A;&#x4E8B;&#x4EF6;&#x6D41;&#x3002;<br>
&#x7F51;&#x666F;&#xFF08;Netscape&#xFF09;&#x516C;&#x53F8;&#x56E2;&#x961F;&#x7684;&#x4E8B;&#x4EF6;&#x6D41;&#x91C7;&#x7528;&#x4E8B;&#x4EF6;&#x6355;&#x83B7;&#x65B9;&#x5F0F;&#xFF0C;&#x800C;&#x5FAE;&#x8F6F;&#xFF08;Microsoft&#xFF09;&#x516C;&#x53F8;&#x7684;&#x4E8B;&#x4EF6;&#x6D41;&#x91C7;&#x7528;&#x4E8B;&#x4EF6;&#x5192;&#x6CE1;&#x65B9;&#x5F0F;&#xFF0C;W3C&#x5BF9;&#x7F51;&#x666F;&#x516C;&#x53F8;&#x548C;&#x5FAE;&#x8F6F;&#x516C;&#x53F8;&#x63D0;&#x51FA;&#x7684;&#x65B9;&#x6848;&#x8FDB;&#x884C;&#x4E86;&#x4E2D;&#x548C;&#x5904;&#x7406;&#xFF0C;&#x89C4;&#x5B9A;&#x4E86;&#x4E8B;&#x4EF6;&#x53D1;&#x751F;&#x540E;&#xFF0C;&#x9996;&#x5148;&#x5B9E;&#x73B0;&#x4E8B;&#x4EF6;&#x6355;&#x83B7;&#xFF0C;&#x4F46;&#x4E0D;&#x4F1A;&#x5BF9;&#x4E8B;&#x4EF6;&#x8FDB;&#x884C;&#x5904;&#x7406;&#xFF1B;&#x7136;&#x540E;&#x8FDB;&#x884C;&#x5230;&#x76EE;&#x6807;&#x9636;&#x6BB5;&#xFF0C;&#x6267;&#x884C;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x5BF9;&#x8C61;&#x7684;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x7A0B;&#x5E8F;&#xFF0C;&#x4F46;&#x5B83;&#x4F1A;&#x88AB;&#x770B;&#x6210;&#x662F;&#x5192;&#x6CE1;&#x9636;&#x6BB5;&#x7684;&#x4E00;&#x90E8;&#x5206;&#xFF1B;&#x6700;&#x540E;&#x5B9E;&#x73B0;&#x4E8B;&#x4EF6;&#x7684;&#x5192;&#x6CE1;&#xFF0C;&#x9010;&#x7EA7;&#x5BF9;&#x4E8B;&#x4EF6;&#x8FDB;&#x884C;&#x5904;&#x7406;&#x3002;<br>
<img src="../image/shijianliu.png" alt="W3C&#x89C4;&#x5B9A;&#x7684;&#x4E8B;&#x4EF6;&#x6D41;&#x65B9;&#x5F0F;1"></p>
<h2 class="mume-header" id="%E4%B8%83-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1">&#x4E03;&#x3001;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;</h2>

<h3 class="mume-header" id="1-%E4%BB%80%E4%B9%88%E6%98%AF%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1">1&#x3001;&#x4EC0;&#x4E48;&#x662F;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;</h3>

<p>&#x5F53;&#x4E00;&#x4E2A;&#x4E8B;&#x4EF6;&#x53D1;&#x751F;&#x540E;&#xFF0C;&#x8DDF;&#x4E8B;&#x4EF6;&#x76F8;&#x5173;&#x7684;&#x4E00;&#x7CFB;&#x5217;&#x4FE1;&#x606F;&#x6570;&#x636E;&#x7684;&#x96C6;&#x5408;&#x90FD;&#x653E;&#x5230;&#x8FD9;&#x4E2A;&#x5BF9;&#x8C61;&#x91CC;&#x9762;&#xFF0C;&#x8FD9;&#x4E2A;&#x5BF9;&#x8C61;&#x5C31;&#x662F;event&#x3002;&#x53EA;&#x6709;&#x6709;&#x4E86;&#x4E8B;&#x4EF6;event&#x624D;&#x4F1A;&#x5B58;&#x5728;&#xFF0C;&#x5B83;&#x662F;&#x7CFB;&#x7EDF;&#x81EA;&#x52A8;&#x521B;&#x5EFA;&#x7684;&#xFF0C;&#x4E0D;&#x9700;&#x8981;&#x4F20;&#x9012;&#x53C2;&#x6570;&#x3002;</p>
<p>&#x5728;&#x6807;&#x51C6;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x4F1A;&#x5C06;&#x4E00;&#x4E2A;event&#x5BF9;&#x8C61;&#x76F4;&#x63A5;&#x4F20;&#x5165;&#x5230;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x7A0B;&#x5E8F;&#x4E2D;&#xFF0C;&#x800C;&#x65E9;&#x671F;&#x7248;&#x672C;&#x7684;IE&#x6D4F;&#x89C8;&#x5668;&#xFF08;IE 6~IE 8&#xFF09;&#x4E2D;&#xFF0C;&#x4EC5;&#x80FD;&#x901A;&#x8FC7;window.event&#x624D;&#x80FD;&#x83B7;&#x53D6;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x3002;</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword keyword-var">var</span> &#x4E8B;&#x4EF6;&#x5BF9;&#x8C61; <span class="token operator">=</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">event</span>        	<span class="token comment">// &#x65E9;&#x671F;IE&#x5185;&#x6838;&#x6D4F;&#x89C8;&#x5668;</span>
<span class="token constant">DOM</span>&#x5BF9;&#x8C61;<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">&#x4E8B;&#x4EF6;</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>	<span class="token comment">// W3C&#x5185;&#x6838;&#x6D4F;&#x89C8;&#x5668;</span>
</pre><p>&#x6CE8;&#x610F;&#xFF1A;&#x56E0;&#x4E3A;&#x5728;&#x4E8B;&#x4EF6;&#x89E6;&#x53D1;&#x65F6;&#x5C31;&#x4F1A;&#x4EA7;&#x751F;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#xFF0C;&#x5E76;&#x4E14;&#x7CFB;&#x7EDF;&#x4F1A;&#x4EE5;&#x5B9E;&#x53C2;&#x7684;&#x5F62;&#x5F0F;&#x4F20;&#x7ED9;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x51FD;&#x6570;&#x3002;&#x6240;&#x4EE5;&#xFF0C;&#x5728;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x51FD;&#x6570;&#x4E2D;&#x9700;&#x8981;&#x7528;&#x4E00;&#x4E2A;&#x5F62;&#x53C2;&#x6765;&#x63A5;&#x6536;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;event&#x3002;</p>
<h3 class="mume-header" id="2-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BD%BF%E7%94%A8">2&#x3001;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x7684;&#x4F7F;&#x7528;</h3>

<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x83B7;&#x53D6;event&#x5BF9;&#x8C61;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword keyword-var">var</span> btn <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">&apos;btn&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  btn<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onclick</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-var">var</span> event <span class="token operator">=</span> e <span class="token operator">||</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">event</span><span class="token punctuation">;</span>    <span class="token comment">// &#x83B7;&#x53D6;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x7684;&#x517C;&#x5BB9;&#x5904;&#x7406;</span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x5728;Chrome&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x7684;&#x6548;&#x679C;&#x5982;&#x53F3;&#x56FE;&#x6240;&#x793A;&#xFF1A;<br>
<img src="../image/shijianduixiang.png" alt="&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;"></p>
<h3 class="mume-header" id="3-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B8%B8%E8%A7%81%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95">3&#x3001;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x7684;&#x5E38;&#x89C1;&#x5C5E;&#x6027;&#x548C;&#x65B9;&#x6CD5;</h3>

<p>&#x5728;&#x4E8B;&#x4EF6;&#x53D1;&#x751F;&#x540E;&#xFF0C;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;event&#x4E2D;&#x4F1A;&#x5305;&#x542B;&#x4E00;&#x4E9B;&#x6240;&#x6709;&#x4E8B;&#x4EF6;&#x90FD;&#x6709;&#x7684;&#x5C5E;&#x6027;&#x548C;&#x65B9;&#x6CD5;&#x3002;&#x6240;&#x6709;&#x4E8B;&#x4EF6;&#x57FA;&#x672C;&#x4E0A;&#x90FD;&#x5305;&#x62EC;&#x7684;&#x5E38;&#x7528;&#x7684;&#x5C5E;&#x6027;&#x548C;&#x65B9;&#x6CD5;&#x5982;&#x4E0B;&#x8868;&#x6240;&#x793A;&#x3002;</p>
<table>
<thead>
<tr>
<th>&#x5C5E;&#x6027;</th>
<th>&#x8BF4;&#x660E;</th>
<th>&#x6D4F;&#x89C8;&#x5668;</th>
</tr>
</thead>
<tbody>
<tr>
<td>e.target</td>
<td>&#x8FD4;&#x56DE;&#x89E6;&#x53D1;&#x4E8B;&#x4EF6;&#x7684;&#x5BF9;&#x8C61;</td>
<td>&#x6807;&#x51C6;&#x6D4F;&#x89C8;&#x5668;</td>
</tr>
<tr>
<td>e.srcElement</td>
<td>&#x8FD4;&#x56DE;&#x89E6;&#x53D1;&#x4E8B;&#x4EF6;&#x7684;&#x5BF9;&#x8C61;</td>
<td>&#x975E;&#x6807;&#x51C6;IE 6-IE 8&#x4F7F;&#x7528;</td>
</tr>
<tr>
<td>e.type</td>
<td>&#x8FD4;&#x56DE;&#x4E8B;&#x4EF6;&#x7684;&#x7C7B;&#x578B;</td>
<td>&#x6240;&#x6709;&#x6D4F;&#x89C8;&#x5668;</td>
</tr>
<tr>
<td>e.stopPropagation()</td>
<td>&#x963B;&#x6B62;&#x4E8B;&#x4EF6;&#x5192;&#x6CE1;</td>
<td>&#x6807;&#x51C6;&#x6D4F;&#x89C8;&#x5668;</td>
</tr>
<tr>
<td>e.cancelBubble</td>
<td>&#x963B;&#x6B62;&#x4E8B;&#x4EF6;&#x5192;&#x6CE1;</td>
<td>&#x975E;&#x6807;&#x51C6;IE 6-IE 8&#x4F7F;&#x7528;</td>
</tr>
<tr>
<td>e.preventDefault()</td>
<td>&#x963B;&#x6B62;&#x9ED8;&#x8BA4;&#x4E8B;&#x4EF6;&#xFF08;&#x9ED8;&#x8BA4;&#x884C;&#x4E3A;&#xFF09;</td>
<td>&#x6807;&#x51C6;&#x6D4F;&#x89C8;&#x5668;</td>
</tr>
<tr>
<td>e.returnValue</td>
<td>&#x963B;&#x6B62;&#x9ED8;&#x8BA4;&#x4E8B;&#x4EF6;&#xFF08;&#x9ED8;&#x8BA4;&#x884C;&#x4E3A;&#xFF09;</td>
<td>&#x975E;&#x6807;&#x51C6;IE 6-IE 8&#x4F7F;&#x7528;</td>
</tr>
</tbody>
</table>
<p>&#x8868;&#x4E2D;&#x7684;type&#x5C5E;&#x6027;&#x662F;&#x6807;&#x51C6;&#x6D4F;&#x89C8;&#x5668;&#x548C;&#x65E9;&#x671F;&#x7248;&#x672C;IE&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x7684;&#x516C;&#x6709;&#x5C5E;&#x6027;&#xFF0C;&#x901A;&#x8FC7;&#x8BE5;&#x5C5E;&#x6027;&#x53EF;&#x4EE5;&#x83B7;&#x53D6;&#x53D1;&#x751F;&#x4E8B;&#x4EF6;&#x7684;&#x7C7B;&#x578B;&#xFF0C;&#x5982;click&#x3001;mouseover&#x7B49;&#xFF08;&#x4E0D;&#x5E26;on&#xFF09;&#x3002;</p>
<ol>
<li>
<p>&#x5BF9;&#x6BD4;e.target&#x548C;this&#x7684;&#x533A;&#x522B;<br>
&#x5728;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x51FD;&#x6570;&#x4E2D;&#xFF0C;e.target&#x8FD4;&#x56DE;&#x7684;&#x662F;&#x89E6;&#x53D1;&#x4E8B;&#x4EF6;&#x7684;&#x5BF9;&#x8C61;&#xFF0C;&#x800C;this&#x8FD4;&#x56DE;&#x7684;&#x662F;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x7684;&#x5BF9;&#x8C61;&#x3002;&#x56E0;&#x4E3A;e.target&#x652F;&#x6301;IE9&#x4EE5;&#x4E0A;&#xFF0C;&#x6240;&#x4EE5;&#x7F16;&#x5199;&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;&#xFF0C;&#x5904;&#x7406;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#x3002;</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript">div<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onclick</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  e <span class="token operator">=</span> e <span class="token operator">||</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">event</span><span class="token punctuation">;</span>
  <span class="token keyword keyword-var">var</span> target <span class="token operator">=</span> e<span class="token punctuation">.</span><span class="token property-access">target</span> <span class="token operator">||</span> e<span class="token punctuation">.</span><span class="token property-access">srcElement</span><span class="token punctuation">;</span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre></li>
<li>
<p>&#x963B;&#x6B62;&#x9ED8;&#x8BA4;&#x884C;&#x4E3A;<br>
&#x5728;&#x5B9E;&#x9645;&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;&#x4E3A;&#x4E86;&#x4F7F;&#x7A0B;&#x5E8F;&#x66F4;&#x52A0;&#x4E25;&#x8C28;&#xFF0C;&#x60F3;&#x8981;&#x786E;&#x5B9A;&#x542B;&#x6709;&#x9ED8;&#x8BA4;&#x884C;&#x4E3A;&#x7684;&#x6807;&#x7B7E;&#x7B26;&#x5408;&#x8981;&#x6C42;&#x540E;&#xFF0C;&#x624D;&#x80FD;&#x6267;&#x884C;&#x9ED8;&#x8BA4;&#x884C;&#x4E3A;&#x65F6;&#xFF0C;&#x53EF;&#x5229;&#x7528;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x7684; <strong>preventDefault()</strong> &#x65B9;&#x6CD5;&#x548C; <strong>returnValue</strong> &#x5C5E;&#x6027;&#xFF0C;&#x7981;&#x6B62;&#x6240;&#x6709;&#x6D4F;&#x89C8;&#x5668;&#x6267;&#x884C;&#x5143;&#x7D20;&#x7684;&#x9ED8;&#x8BA4;&#x884C;&#x4E3A;&#x3002;&#x9700;&#x8981;&#x6CE8;&#x610F;&#x7684;&#x662F;&#xFF0C;&#x53EA;&#x6709;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x7684;cancelable&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x4E3A;true&#xFF0C;&#x624D;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;preventDefault()&#x65B9;&#x6CD5;&#x53D6;&#x6D88;&#x5176;&#x9ED8;&#x8BA4;&#x884C;&#x4E3A;&#x3002;</p>
<p>&#x6848;&#x4F8B;&#x6F14;&#x793A;&#xFF1A;&#x4E0B;&#x9762;&#x6211;&#x4EEC;&#x4EE5;&#x7981;&#x7528;&lt;a&gt;&#x6807;&#x7B7E;&#x7684;&#x94FE;&#x63A5;&#x4E3A;&#x4F8B;&#x8FDB;&#x884C;&#x6F14;&#x793A;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.baidu.com<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x767E;&#x5EA6;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword keyword-var">var</span> a <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;a&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &#x83B7;&#x53D6;a&#x94FE;&#x63A5;&#x5BF9;&#x8C61;</span>
  a<span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">&apos;click&apos;</span><span class="token punctuation">,</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// &#x6CE8;&#x518C;&#x5355;&#x51FB;&#x4E8B;&#x4EF6;</span>
    e<span class="token punctuation">.</span><span class="token method function property-access">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token comment">// DOM&#x6807;&#x51C6;&#x5199;&#x6CD5;&#xFF0C;&#x65E9;&#x671F;&#x7248;&#x672C;&#x6D4F;&#x89C8;&#x5668;&#x4E0D;&#x652F;&#x6301;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// &#x63A8;&#x8350;&#x4F7F;&#x7528;&#x4F20;&#x7EDF;&#x7684;&#x6CE8;&#x518C;&#x65B9;&#x5F0F;</span>
  a<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onclick</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    e<span class="token punctuation">.</span><span class="token method function property-access">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>	<span class="token comment">// &#x6807;&#x51C6;&#x6D4F;&#x89C8;&#x5668;&#x4F7F;&#x7528;e.preventDefault()&#x65B9;&#x6CD5;</span>
    e<span class="token punctuation">.</span><span class="token property-access">returnValue</span><span class="token punctuation">;</span>    <span class="token comment">// &#x65E9;&#x671F;&#x7248;&#x672C;&#x6D4F;&#x89C8;&#x5668;&#xFF08;IE6&#x3001;7&#x3001;8&#xFF09;&#x4F7F;&#x7528;returnValue&#x5C5E;      </span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre></li>
<li>
<p>&#x963B;&#x6B62;&#x4E8B;&#x4EF6;&#x5192;&#x6CE1;<br>
&#x53EF;&#x4EE5;&#x5229;&#x7528;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x8C03;&#x7528;stopPropagation()&#x65B9;&#x6CD5;&#x548C;&#x8BBE;&#x7F6E;cancelBubble&#x5C5E;&#x6027;&#xFF0C;&#x5B9E;&#x73B0;&#x7981;&#x6B62;&#x6240;&#x6709;&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x4E8B;&#x4EF6;&#x5192;&#x6CE1;&#x884C;&#x4E3A;&#x3002;</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span><span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>		<span class="token comment">// &#x65E9;&#x671F;&#x7248;&#x672C;&#x7684;&#x6D4F;&#x89C8;&#x5668;</span>
<span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">event</span><span class="token punctuation">.</span><span class="token property-access">cancelBubble</span> <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword control-flow keyword-else">else</span> <span class="token punctuation">{</span>				<span class="token comment">// &#x6807;&#x51C6;&#x6D4F;&#x89C8;&#x5668;</span>
e<span class="token punctuation">.</span><span class="token method function property-access">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre></li>
<li>
<p>&#x4E8B;&#x4EF6;&#x59D4;&#x6258;<br>
&#x4E8B;&#x4EF6;&#x59D4;&#x6258;&#x7684;&#x539F;&#x7406;&#x662F;&#xFF0C;&#x4E0D;&#x7ED9;&#x6BCF;&#x4E2A;&#x5B50;&#x8282;&#x70B9;&#x5355;&#x72EC;&#x8BBE;&#x7F6E;&#x4E8B;&#x4EF6;&#x76D1;&#x542C;&#x5668;&#xFF0C;&#x800C;&#x662F;&#x628A;&#x4E8B;&#x4EF6;&#x76D1;&#x542C;&#x5668;&#x8BBE;&#x7F6E;&#x5728;&#x5176;&#x7236;&#x8282;&#x70B9;&#x4E0A;&#xFF0C;&#x8BA9;&#x5176;&#x5229;&#x7528;&#x4E8B;&#x4EF6;&#x5192;&#x6CE1;&#x7684;&#x539F;&#x7406;&#x5F71;&#x54CD;&#x5230;&#x6BCF;&#x4E2A;&#x5B50;&#x8282;&#x70B9;&#x3002;<br>
&#x7B80;&#x800C;&#x8A00;&#x4E4B;&#xFF0C;&#x5C31;&#x662F;&#x4E0D;&#x7ED9;&#x5B50;&#x5143;&#x7D20;&#x6CE8;&#x518C;&#x4E8B;&#x4EF6;&#xFF0C;&#x7ED9;&#x7236;&#x5143;&#x7D20;&#x6CE8;&#x518C;&#x4E8B;&#x4EF6;&#xFF0C;&#x8BA9;&#x5904;&#x7406;&#x4EE3;&#x7801;&#x5728;&#x7236;&#x5143;&#x7D20;&#x7684;&#x4E8B;&#x4EF6;&#x4E2D;&#x6267;&#x884C;&#x3002;<br>
&#x8FD9;&#x6837;&#x505A;&#x7684;&#x7684;&#x4F18;&#x70B9;&#x5728;&#x4E8E;&#xFF0C;&#x53EA;&#x64CD;&#x4F5C;&#x4E86;&#x4E00;&#x6B21;DOM &#xFF0C;&#x63D0;&#x9AD8;&#x4E86;&#x7A0B;&#x5E8F;&#x7684;&#x6027;&#x80FD;&#x3002;</p>
<p><strong>&#x6848;&#x4F8B;&#x6F14;&#x793A;&#xFF1A;&#x6F14;&#x793A;&#x4E8B;&#x4EF6;&#x59D4;&#x6258;&#x7684;&#x4F7F;&#x7528;&#x3002;</strong></p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x6211;&#x662F;&#x7B2C; 1 &#x4E2A;li<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  // &#x2026;&#x6B64;&#x5904;&#x7701;&#x7565;&#x591A;&#x4E2A;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>&#x6807;&#x7B7E;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword keyword-var">var</span> ul <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;ul&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  ul<span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">&apos;click&apos;</span><span class="token punctuation">,</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    e<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">backgroundColor</span> <span class="token operator">=</span> <span class="token string">&apos;pink&apos;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre></li>
</ol>
<h2 class="mume-header" id="%E5%85%AB-%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6">&#x516B;&#x3001;&#x9F20;&#x6807;&#x4E8B;&#x4EF6;</h2>

<h3 class="mume-header" id="1-%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95">1&#x3001;&#x9F20;&#x6807;&#x4E8B;&#x4EF6;&#x7684;&#x5E38;&#x7528;&#x65B9;&#x6CD5;</h3>

<p>&#x9F20;&#x6807;&#x662F;&#x8BA1;&#x7B97;&#x673A;&#x7684;&#x4E00;&#x79CD;&#x8F93;&#x5165;&#x8BBE;&#x5907;&#xFF0C;&#x4E5F;&#x662F;&#x8BA1;&#x7B97;&#x673A;&#x663E;&#x793A;&#x7CFB;&#x7EDF;&#x7EB5;&#x6A2A;&#x5750;&#x6807;&#x5B9A;&#x4F4D;&#x7684;&#x6307;&#x793A;&#x5668;&#xFF0C;&#x6240;&#x4EE5;&#x9F20;&#x6807;&#x4E8B;&#x4EF6;&#x662F;Web&#x5F00;&#x53D1;&#x4E2D;&#x6700;&#x5E38;&#x7528;&#x7684;&#x4E00;&#x7C7B;&#x4E8B;&#x4EF6;&#x3002;&#x5E38;&#x89C1;&#x7684;&#x9F20;&#x6807;&#x4E8B;&#x4EF6;&#x5982;&#x4E0B;&#x8868;&#x6240;&#x793A;&#xFF1A;</p>
<table>
<thead>
<tr>
<th>&#x4E8B;&#x4EF6;&#x540D;&#x79F0;</th>
<th>&#x4E8B;&#x4EF6;&#x89E6;&#x53D1;&#x65F6;&#x673A;</th>
</tr>
</thead>
<tbody>
<tr>
<td>onclick</td>
<td>&#x5355;&#x51FB;&#x9F20;&#x6807;&#x5DE6;&#x952E;&#x65F6;&#x89E6;&#x53D1;</td>
</tr>
<tr>
<td>onfocus</td>
<td>&#x83B7;&#x5F97;&#x9F20;&#x6807;&#x6307;&#x9488;&#x7126;&#x70B9;&#x89E6;&#x53D1;</td>
</tr>
<tr>
<td>onblur</td>
<td>&#x5931;&#x53BB;&#x9F20;&#x6807;&#x6307;&#x9488;&#x7126;&#x70B9;&#x89E6;&#x53D1;</td>
</tr>
<tr>
<td>onmouseover</td>
<td>&#x9F20;&#x6807;&#x6307;&#x9488;&#x7ECF;&#x8FC7;&#x65F6;&#x89E6;&#x53D1;</td>
</tr>
<tr>
<td>onmouseout</td>
<td>&#x9F20;&#x6807;&#x6307;&#x9488;&#x79BB;&#x5F00;&#x65F6;&#x89E6;&#x53D1;</td>
</tr>
<tr>
<td>onmousedown</td>
<td>&#x5F53;&#x6309;&#x4E0B;&#x4EFB;&#x610F;&#x9F20;&#x6807;&#x6309;&#x952E;&#x65F6;&#x89E6;&#x53D1;</td>
</tr>
<tr>
<td>onmouseup</td>
<td>&#x5F53;&#x91CA;&#x653E;&#x4EFB;&#x610F;&#x9F20;&#x6807;&#x6309;&#x952E;&#x65F6;&#x89E6;&#x53D1;</td>
</tr>
<tr>
<td>onmousemove</td>
<td>&#x5728;&#x5143;&#x7D20;&#x5185;&#x5F53;&#x9F20;&#x6807;&#x6307;&#x9488;&#x79FB;&#x52A8;&#x65F6;&#x6301;&#x7EED;&#x89E6;&#x53D1;</td>
</tr>
</tbody>
</table>
<ol>
<li>&#x7981;&#x6B62;&#x9F20;&#x6807;&#x53F3;&#x51FB;&#x83DC;&#x5355;<br>
contextmenu&#x4E3B;&#x8981;&#x63A7;&#x5236;&#x5E94;&#x8BE5;&#x4F55;&#x65F6;&#x663E;&#x793A;&#x4E0A;&#x4E0B;&#x6587;&#x83DC;&#x5355;&#xFF0C;&#x4E3B;&#x8981;&#x5E94;&#x7528;&#x4E8E;&#x7A0B;&#x5E8F;&#x5458;&#x53D6;&#x6D88;&#x9ED8;&#x8BA4;&#x7684;&#x4E0A;&#x4E0B;&#x6587;&#x83DC;&#x5355;&#xFF0C;&#x793A;&#x4F8B;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#x3002;</li>
</ol>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">&apos;contextmenu&apos;</span><span class="token punctuation">,</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  e<span class="token punctuation">.</span><span class="token method function property-access">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><ol start="2">
<li>&#x7981;&#x6B62;&#x9F20;&#x6807;&#x9009;&#x4E2D;<br>
selectstart&#x4E8B;&#x4EF6;&#x662F;&#x9F20;&#x6807;&#x5F00;&#x59CB;&#x9009;&#x62E9;&#x6587;&#x5B57;&#x65F6;&#x5C31;&#x4F1A;&#x89E6;&#x53D1;&#xFF0C;&#x5982;&#x679C;&#x7981;&#x6B62;&#x9F20;&#x6807;&#x9009;&#x4E2D;&#xFF0C;&#x9700;&#x8981;&#x7981;&#x6B62;&#x8BE5;&#x4E8B;&#x4EF6;&#x7684;&#x9ED8;&#x8BA4;&#x884C;&#x4E3A;&#xFF0C;&#x793A;&#x4F8B;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#x3002;</li>
</ol>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">&apos;selectstart&apos;</span><span class="token punctuation">,</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  e<span class="token punctuation">.</span><span class="token method function property-access">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><h3 class="mume-header" id="2-%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1">2&#x3001;&#x9F20;&#x6807;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;</h3>

<p>&#x9F20;&#x6807;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;MouseEvent&#xFF0C;&#x662F;&#x8DDF;&#x9F20;&#x6807;&#x4E8B;&#x4EF6;&#x76F8;&#x5173;&#x7684;&#x4E00;&#x7CFB;&#x5217;&#x4FE1;&#x606F;&#x7684;&#x96C6;&#x5408;&#xFF0C;&#x53EF;&#x4EE5;&#x7528;&#x6765;&#x83B7;&#x53D6;&#x5F53;&#x524D;&#x9F20;&#x6807;&#x7684;&#x4F4D;&#x7F6E;&#x4FE1;&#x606F;&#xFF0C;&#x9F20;&#x6807;&#x4E8B;&#x4EF6;&#x4F4D;&#x7F6E;&#x5C5E;&#x6027;&#x5982;&#x4E0B;&#x8868;&#x6240;&#x793A;&#x3002;<br>
|&#x4F4D;&#x7F6E;&#x5C5E;&#x6027;&#xFF08;&#x53EA;&#x8BFB;&#xFF09;|	&#x63CF;&#x8FF0;|<br>
|clientX|	&#x9F20;&#x6807;&#x6307;&#x9488;&#x4F4D;&#x4E8E;&#x6D4F;&#x89C8;&#x5668;&#x9875;&#x9762;&#x5F53;&#x524D;&#x7A97;&#x53E3;&#x53EF;&#x89C6;&#x533A;&#x7684;&#x6C34;&#x5E73;&#x5750;&#x6807;&#xFF08;X&#x8F74;&#x5750;&#x6807;&#xFF09;|<br>
|clientY|	&#x9F20;&#x6807;&#x6307;&#x9488;&#x4F4D;&#x4E8E;&#x6D4F;&#x89C8;&#x5668;&#x9875;&#x9762;&#x5F53;&#x524D;&#x7A97;&#x53E3;&#x53EF;&#x89C6;&#x533A;&#x7684;&#x5782;&#x76F4;&#x5750;&#x6807;&#xFF08;Y&#x8F74;&#x5750;&#x6807;&#xFF09;|<br>
|pageX|	&#x9F20;&#x6807;&#x6307;&#x9488;&#x4F4D;&#x4E8E;&#x6587;&#x6863;&#x7684;&#x6C34;&#x5E73;&#x5750;&#x6807;&#xFF08;X&#x8F74;&#x5750;&#x6807;&#xFF09;&#xFF0C;IE 6~IE 8&#x4E0D;&#x517C;&#x5BB9;|<br>
|pageY|	&#x9F20;&#x6807;&#x6307;&#x9488;&#x4F4D;&#x4E8E;&#x6587;&#x6863;&#x7684;&#x5782;&#x76F4;&#x5750;&#x6807;&#xFF08;Y&#x8F74;&#x5750;&#x6807;&#xFF09;&#xFF0C;IE 6~IE 8&#x4E0D;&#x517C;&#x5BB9;|<br>
|screenX|	&#x9F20;&#x6807;&#x6307;&#x9488;&#x4F4D;&#x4E8E;&#x5C4F;&#x5E55;&#x7684;&#x6C34;&#x5E73;&#x5750;&#x6807;&#xFF08;X&#x8F74;&#x5750;&#x6807;&#xFF09;|<br>
|screenY|	&#x9F20;&#x6807;&#x6307;&#x9488;&#x4F4D;&#x4E8E;&#x5C4F;&#x5E55;&#x7684;&#x5782;&#x76F4;&#x5750;&#x6807;&#xFF08;Y&#x8F74;&#x5750;&#x6807;&#xFF09;|<br>
IE 6~IE 8&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x4E0D;&#x517C;&#x5BB9;pageX&#x548C;pageY&#x5C5E;&#x6027;&#xFF0C;&#x5728;&#x9879;&#x76EE;&#x5F00;&#x53D1;&#x65F6;&#x9700;&#x8981;&#x5BF9;IE 6~IE 8&#x6D4F;&#x89C8;&#x5668;&#x8FDB;&#x884C;&#x517C;&#x5BB9;&#x5904;&#x7406;&#xFF0C;&#x793A;&#x4F8B;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#x6240;&#x793A;&#x3002;</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword keyword-var">var</span> pageX <span class="token operator">=</span> event<span class="token punctuation">.</span><span class="token property-access">pageX</span> <span class="token operator">||</span> event<span class="token punctuation">.</span><span class="token property-access">clientX</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token property-access">body</span><span class="token punctuation">.</span><span class="token property-access">scrollLeft</span> <span class="token operator">||</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token property-access">documentElement</span><span class="token punctuation">.</span><span class="token property-access">scrollLeft</span><span class="token punctuation">)</span>
<span class="token keyword keyword-var">var</span> pageY <span class="token operator">=</span> event<span class="token punctuation">.</span><span class="token property-access">pageY</span> <span class="token operator">||</span> event<span class="token punctuation">.</span><span class="token property-access">clientY</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token property-access">body</span><span class="token punctuation">.</span><span class="token property-access">scrollTop</span> <span class="token operator">||</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token property-access">documentElement</span><span class="token punctuation">.</span><span class="token property-access">scrollTop</span><span class="token punctuation">)</span>
</pre><h3 class="mume-header" id="3-%E6%A1%88%E4%BE%8B%E5%9B%BE%E7%89%87%E8%B7%9F%E9%9A%8F%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8">3&#x3001;&#x3010;&#x6848;&#x4F8B;&#x3011;&#x56FE;&#x7247;&#x8DDF;&#x968F;&#x9F20;&#x6807;&#x79FB;&#x52A8;</h3>

<p>&#x6848;&#x4F8B;&#x9700;&#x6C42;&#xFF1A;&#x7B80;&#x5355;&#x5B9E;&#x73B0;&#x56FE;&#x7247;&#x8DDF;&#x968F;&#x9F20;&#x6807;&#x79FB;&#x52A8;&#x7684;&#x6548;&#x679C;&#xFF08;&#x4E0D;&#x8003;&#x8651;&#x517C;&#x5BB9;&#x6027;&#xFF09;&#x3002;<br>
&#x6848;&#x4F8B;&#x5206;&#x6790;&#xFF1A;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x9F20;&#x6807;&#x6307;&#x9488;&#x79FB;&#x52A8;&#x4E8B;&#x4EF6;mousemove&#xFF0C;&#x6BCF;&#x6B21;&#x9F20;&#x6807;&#x79FB;&#x52A8;&#xFF0C;&#x90FD;&#x4F1A;&#x83B7;&#x5F97;&#x6700;&#x65B0;&#x7684;&#x9F20;&#x6807;&#x6307;&#x9488;&#x5750;&#x6807;&#xFF0C;&#x628A;&#x8FD9;&#x4E2A;x&#x548C;y&#x5750;&#x6807;&#x4F5C;&#x4E3A;&#x56FE;&#x7247;&#x7684;top&#x548C;left&#xA0;&#x503C;&#x5C31;&#x53EF;&#x4EE5;&#x5B9E;&#x73B0;&#x56FE;&#x7247;&#x7684;&#x79FB;&#x52A8;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">img</span> <span class="token punctuation">{</span> // &#x7ED9;img&#x56FE;&#x7247;&#x8BBE;&#x7F6E;&#x5B9A;&#x4F4D;
    position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    top<span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>images/angel.gif<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>// &#x9700;&#x8981;&#x79FB;&#x52A8;&#x7684;&#x56FE;&#x7247;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword keyword-var">var</span> pic <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;img&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">&apos;mousemove&apos;</span><span class="token punctuation">,</span> <span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword keyword-var">var</span> x <span class="token operator">=</span> e<span class="token punctuation">.</span><span class="token property-access">pageX</span><span class="token punctuation">;</span>     <span class="token comment">// &#x83B7;&#x53D6;&#x9F20;&#x6807;&#x7684;X&#x5750;&#x6807;</span>
      <span class="token keyword keyword-var">var</span> y <span class="token operator">=</span> e<span class="token punctuation">.</span><span class="token property-access">pageY</span><span class="token punctuation">;</span>     <span class="token comment">// &#x83B7;&#x53D6;&#x9F20;&#x6807;&#x7684;Y&#x5750;&#x6807;</span>
      pic<span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">left</span> <span class="token operator">=</span> x <span class="token operator">-</span> <span class="token number">50</span> <span class="token operator">+</span> <span class="token string">&apos;px&apos;</span><span class="token punctuation">;</span> 
      pic<span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">top</span> <span class="token operator">=</span> y <span class="token operator">-</span> <span class="token number">40</span> <span class="token operator">+</span> <span class="token string">&apos;px&apos;</span><span class="token punctuation">;</span> 
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre><h2 class="mume-header" id="%E4%B9%9D-%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6">&#x4E5D;&#x3001;&#x952E;&#x76D8;&#x4E8B;&#x4EF6;</h2>

<h3 class="mume-header" id="1-%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95">1&#x3001;&#x952E;&#x76D8;&#x4E8B;&#x4EF6;&#x7684;&#x5E38;&#x7528;&#x65B9;&#x6CD5;</h3>

<p>&#x952E;&#x76D8;&#x4E8B;&#x4EF6;&#x662F;&#x6307;&#x7528;&#x6237;&#x5728;&#x4F7F;&#x7528;&#x952E;&#x76D8;&#x65F6;&#x89E6;&#x53D1;&#x7684;&#x4E8B;&#x4EF6;&#x3002;&#x4F8B;&#x5982;&#xFF0C;&#x7528;&#x6237;&#x6309;Esc&#x952E;&#x5173;&#x95ED;&#x6253;&#x5F00;&#x7684;&#x72B6;&#x6001;&#x680F;&#xFF0C;&#x6309;Enter&#x952E;&#x76F4;&#x63A5;&#x5B8C;&#x6210;&#x5149;&#x6807;&#x7684;&#x4E0A;&#x4E0B;&#x5207;&#x6362;&#x7B49;&#x3002;&#x5E38;&#x7528;&#x7684;&#x952E;&#x76D8;&#x4E8B;&#x4EF6;&#x5982;&#x4E0B;&#x8868;&#x6240;&#x793A;&#x3002;<br>
|&#x4E8B;&#x4EF6;&#x540D;&#x79F0;|	&#x4E8B;&#x4EF6;&#x89E6;&#x53D1;&#x65F6;&#x673A;|<br>
|keypress|	&#x67D0;&#x4E2A;&#x952E;&#x76D8;&#x6309;&#x952E;&#x88AB;&#x6309;&#x4E0B;&#x65F6;&#x89E6;&#x53D1;&#xFF0C;&#x4E0D;&#x8BC6;&#x522B;&#x529F;&#x80FD;&#x952E;&#xFF0C;&#x5982;Ctrl&#x3001;Shift&#x3001;&#x7BAD;&#x5934;&#x7B49;|<br>
|keydown|	&#x67D0;&#x4E2A;&#x952E;&#x76D8;&#x6309;&#x952E;&#x88AB;&#x6309;&#x4E0B;&#x65F6;&#x89E6;&#x53D1;|<br>
|keyup|	&#x67D0;&#x4E2A;&#x952E;&#x76D8;&#x6309;&#x952E;&#x88AB;&#x677E;&#x5F00;&#x65F6;&#x89E6;&#x53D1;|<br>
keypress&#x4E8B;&#x4EF6;&#x4FDD;&#x5B58;&#x7684;&#x6309;&#x952E;&#x503C;&#x662F;ASCII&#x7801;&#xFF0C;keydown&#x548C;keyup&#x4E8B;&#x4EF6;&#x4FDD;&#x5B58;&#x7684;&#x6309;&#x952E;&#x503C;&#x662F;&#x865A;&#x62DF;&#x952E;&#x7801;&#xFF0C;keydown&#x548C;keypress&#x5982;&#x679C;&#x6309;&#x4F4F;&#x4E0D;&#x653E;&#x7684;&#x8BDD;&#xFF0C;&#x4F1A;&#x91CD;&#x590D;&#x89E6;&#x53D1;&#x8BE5;&#x5BF9;&#x5E94;&#x4E8B;&#x4EF6;&#x3002;keyup&#x548C;keydown&#x4E8B;&#x4EF6;&#x4E0D;&#x533A;&#x5206;&#x5B57;&#x6BCD;&#x5927;&#x5C0F;&#x5199;&#xFF0C;&#x800C;keypress&#x533A;&#x5206;&#x5B57;&#x6BCD;&#x5927;&#x5C0F;&#x5199;&#x3002;</p>
<h3 class="mume-header" id="2-%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1">2&#x3001;&#x952E;&#x76D8;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;</h3>

<p>&#x952E;&#x76D8;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61; <strong>KeyBoardEvent</strong> &#xFF0C;&#x662F;&#x8DDF;&#x952E;&#x76D8;&#x4E8B;&#x4EF6;&#x76F8;&#x5173;&#x7684;&#x4E00;&#x7CFB;&#x5217;&#x4FE1;&#x606F;&#x7684;&#x96C6;&#x5408;&#xFF0C;&#x6839;&#x636E;&#x952E;&#x76D8;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x4E2D;&#x7684;keyCode&#x5C5E;&#x6027;&#x53EF;&#x4EE5;&#x5F97;&#x5230;&#x76F8;&#x5E94;&#x7684;ASCII&#x7801;&#x503C;&#xFF0C;&#x8FDB;&#x800C;&#x53EF;&#x4EE5;&#x5224;&#x65AD;&#x7528;&#x6237;&#x6309;&#x4E0B;&#x4E86;&#x54EA;&#x4E2A;&#x952E;&#x3002;<br>
<strong>&#x6848;&#x4F8B;&#x6F14;&#x793A;&#xFF1A;</strong> &#x68C0;&#x6D4B;&#x7528;&#x6237;&#x662F;&#x5426;&#x6309;&#x4E0B;&#x4E86;s&#x952E;&#xFF0C;&#x5982;&#x679C;&#x6309;&#x4E0B;s&#xA0;&#x952E;&#xFF0C;&#x5C31;&#x628A;&#x5149;&#x6807;&#x5B9A;&#x4F4D;&#x5230;&#x641C;&#x7D22;&#x6846;&#x91CC;&#x9762;&#xFF0C;&#x793A;&#x4F8B;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword keyword-var">var</span> search <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;input&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">&apos;keyup&apos;</span><span class="token punctuation">,</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">.</span><span class="token property-access">keyCode</span> <span class="token operator">===</span> <span class="token number">83</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        search<span class="token punctuation">.</span><span class="token method function property-access">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</pre><h3 class="mume-header" id="3-%E6%A1%88%E4%BE%8B%E6%96%87%E6%9C%AC%E6%A1%86%E6%8F%90%E7%A4%BA%E4%BF%A1%E6%81%AF">3&#x3001;&#x3010;&#x6848;&#x4F8B;&#x3011;&#x6587;&#x672C;&#x6846;&#x63D0;&#x793A;&#x4FE1;&#x606F;</h3>

<p><strong>&#x6848;&#x4F8B;&#x9700;&#x6C42;</strong> &#xFF1A;&#x5728;&#x73B0;&#x5B9E;&#x751F;&#x6D3B;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x7ECF;&#x5E38;&#x4F1A;&#x4F7F;&#x7528;&#x5FEB;&#x9012;&#x5355;&#x53F7;&#x67E5;&#x8BE2;&#x529F;&#x80FD;&#xFF0C;&#x67E5;&#x770B;&#x5546;&#x54C1;&#x7684;&#x7269;&#x6D41;&#x4FE1;&#x606F;&#x72B6;&#x6001;&#x3002;&#x6709;&#x65F6;&#x5728;&#x7528;&#x6237;&#x8F93;&#x5165;&#x5355;&#x53F7;&#x65F6;&#xFF0C;&#x7F51;&#x7AD9;&#x4E3A;&#x4E86;&#x8BA9;&#x7528;&#x6237;&#x770B;&#x6E05;&#x695A;&#x8F93;&#x5165;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x4F1A;&#x5728;&#x6587;&#x672C;&#x6846;&#x4E0A;&#x65B9;&#x663E;&#x793A;&#x4E00;&#x4E2A;&#x63D0;&#x793A;&#x680F;&#xFF0C;&#x5C06;&#x7528;&#x6237;&#x8F93;&#x5165;&#x7684;&#x6570;&#x5B57;&#x653E;&#x5927;&#x3002;<br>
<strong>&#x6848;&#x4F8B;&#x5206;&#x6790;</strong> &#xFF1A;&#x5F53;&#x7528;&#x6237;&#x5728;&#x6587;&#x672C;&#x6846;&#x4E2D;&#x8F93;&#x5165;&#x5185;&#x5BB9;&#x65F6;&#xFF0C;&#x6587;&#x672C;&#x6846;&#x4E0A;&#x9762;&#x81EA;&#x52A8;&#x663E;&#x793A;&#x5927;&#x53F7;&#x5B57;&#x7684;&#x5185;&#x5BB9;&#x3002;&#x5982;&#x679C;&#x7528;&#x6237;&#x8F93;&#x5165;&#x4E3A;&#x7A7A;&#xFF0C;&#x9700;&#x8981;&#x9690;&#x85CF;&#x5927;&#x53F7;&#x5B57;&#x5185;&#x5BB9;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- &#x7F16;&#x5199;HTML&#x4EE3;&#x7801; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>con<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>&#x5FEB;&#x9012;&#x5355;&#x53F7;&#xFF1A;
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>&#x8BF7;&#x8F93;&#x5165;&#x60A8;&#x7684;&#x5FEB;&#x9012;&#x5355;&#x53F7;<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>num<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &#x68C0;&#x6D4B;&#x7528;&#x6237;&#x8F93;&#x5165;&#xFF0C;&#x7ED9;&#x8868;&#x5355;&#x6DFB;&#x52A0;&#x952E;&#x76D8;&#x4E8B;&#x4EF6; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword keyword-var">var</span> con <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;.con&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword keyword-var">var</span> numInput <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">&apos;.num&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  numInput<span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">&apos;keyup&apos;</span><span class="token punctuation">,</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">==</span> <span class="token string">&apos;&apos;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  con<span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">display</span> <span class="token operator">=</span> <span class="token string">&apos;none&apos;</span><span class="token punctuation">;</span><span class="token punctuation">}</span> 
   <span class="token keyword control-flow keyword-else">else</span> <span class="token punctuation">{</span>
      con<span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">display</span> <span class="token operator">=</span> <span class="token string">&apos;block&apos;</span><span class="token punctuation">;</span> con<span class="token punctuation">.</span><span class="token property-access">innerText</span> <span class="token operator">=</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token comment">// &#x2026;&#x5728;&#x6B64;&#x5904;&#x7F16;&#x5199;&#x5931;&#x53BB;&#x7126;&#x70B9;&#x548C;&#x83B7;&#x5F97;&#x7126;&#x70B9;&#x4EE3;&#x7801; </span>
<span class="token comment">// &#x5931;&#x53BB;&#x7126;&#x70B9;&#xFF0C;&#x9690;&#x85CF;con&#x5143;&#x7D20;</span>
num_input<span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">&apos;blur&apos;</span><span class="token punctuation">,</span> <span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  con<span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">display</span> <span class="token operator">=</span> <span class="token string">&apos;none&apos;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// &#x83B7;&#x5F97;&#x7126;&#x70B9;&#xFF0C;&#x663E;&#x793A;con&#x5143;&#x7D20;</span>
num_input<span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">&apos;focus&apos;</span><span class="token punctuation">,</span> <span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  con<span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">display</span> <span class="token operator">=</span> <span class="token string">&apos;block&apos;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre><blockquote>
<p>&#x672C;&#x7AE0;&#x4E3B;&#x8981;&#x8BB2;&#x89E3;&#x4E86;DOM&#x7684;&#x4E00;&#x4E9B;&#x5E38;&#x7528;&#x64CD;&#x4F5C;&#xFF0C;&#x4EE5;&#x53CA;&#x4E8B;&#x4EF6;&#x7684;&#x8FDB;&#x9636;&#x5185;&#x5BB9;&#x3002;&#x901A;&#x8FC7;&#x672C;&#x7AE0;&#x7684;&#x5B66;&#x4E60;&#xFF0C;&#x8BFB;&#x8005;&#x5E94;&#x638C;&#x63E1;&#x5982;&#x4F55;&#x8FDB;&#x884C;&#x6392;&#x4ED6;&#x64CD;&#x4F5C;&#x3001;&#x5C5E;&#x6027;&#x64CD;&#x4F5C;&#x3001;&#x8282;&#x70B9;&#x64CD;&#x4F5C;&#xFF0C;&#x5B66;&#x4F1A;&#x5982;&#x4F55;&#x521B;&#x5EFA;&#x8282;&#x70B9;&#x3001;&#x6DFB;&#x52A0;&#x8282;&#x70B9;&#x3001;&#x5220;&#x9664;&#x8282;&#x70B9;&#x3001;&#x590D;&#x5236;&#x8282;&#x70B9;&#x3002;&#x5728;&#x4E8B;&#x4EF6;&#x8FDB;&#x9636;&#x90E8;&#x5206;&#xFF0C;&#x8981;&#x638C;&#x63E1;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x3001;&#x9F20;&#x6807;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x3001;&#x952E;&#x76D8;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x53CA;&#x5404;&#x4E8B;&#x4EF6;&#x5E38;&#x7528;&#x65B9;&#x6CD5;&#x548C;&#x5C5E;&#x6027;&#xFF0C;&#x80FD;&#x591F;&#x901A;&#x8FC7;&#x9F20;&#x6807;&#x53CA;&#x952E;&#x76D8;&#x64CD;&#x4F5C;&#x5143;&#x7D20;&#x3002;</p>
</blockquote>

      </div>
      
      
    
    
    
    
    
    
    
    
  
    </body></html>